Inline Icon Button

Inline icon buttons provide a compact, icon-only action trigger designed for use within text content or tight spaces where a full button would be too prominent.

import {InlineIconButtonComponent} from "@qualcomm-ui/angular/inline-icon-button"

Accessibility Guidelines

Icon-only buttons rely on visual cues that screen readers cannot access. Use aria-label or aria-labelledby to give every icon-only button an accessible name so its purpose is clear to assistive technologies.

Examples

Showcase

Brand

<button aria-label="Close" q-inline-icon-button></button>

Variants

Brand

<button
  aria-label="Close"
  emphasis="persistent-white"
  q-inline-icon-button
></button>

API

q-inline-icon-button

Prop	Type	Default
emphasis The style variant of the button. Governs color.	\| 'neutral' \| 'persistent-white' \| 'persistent-black'	'neutral'
icon	LucideIconData	X
size The size of the button and its icon.	\| 'sm' \| 'md' \| 'lg'	'md'
variant The style variant of the button's icon that controls its size `scale`: The icon size scales with the button's size `fixed`: The icon size is constant, regardless of the button's size	\| 'fixed' \| 'scale'	'fixed'

emphasis

Type

| 'neutral'
| 'persistent-white'
| 'persistent-black'

Description

The style variant of the button. Governs color.

icon

Type

LucideIconData

Description

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the button and its icon.

variant

Type

| 'fixed'
| 'scale'

Description

The style variant of the button's icon that controls its size

scale: The icon size scales with the button's size
fixed: The icon size is constant, regardless of the button's size

Icon Button

Checkbox