ActionIcon
A square, icon-only button sharing the same variant and color system as Button. Always provide an aria-label for accessibility.
Variants
<ActionIcon variant="filled" aria-label="search"><SearchIcon /></ActionIcon>
<ActionIcon variant="light" aria-label="search"><SearchIcon /></ActionIcon>
<ActionIcon variant="outline" aria-label="search"><SearchIcon /></ActionIcon>
<ActionIcon variant="subtle" aria-label="search"><SearchIcon /></ActionIcon>
<ActionIcon variant="transparent" aria-label="search"><SearchIcon /></ActionIcon>
<ActionIcon variant="default" aria-label="search"><SearchIcon /></ActionIcon>Color
<ActionIcon color="violet" aria-label="like"><HeartIcon /></ActionIcon>
<ActionIcon color="blue" aria-label="like"><HeartIcon /></ActionIcon>
<ActionIcon color="green" aria-label="like"><HeartIcon /></ActionIcon>
<ActionIcon color="red" aria-label="like"><HeartIcon /></ActionIcon>Size
<ActionIcon size="xs" aria-label="search"><SearchIcon /></ActionIcon>
<ActionIcon size="sm" aria-label="search"><SearchIcon /></ActionIcon>
<ActionIcon size="md" aria-label="search"><SearchIcon /></ActionIcon>
<ActionIcon size="lg" aria-label="search"><SearchIcon /></ActionIcon>
<ActionIcon size="xl" aria-label="search"><SearchIcon /></ActionIcon>Radius
<ActionIcon radius="xs" aria-label="delete"><TrashIcon /></ActionIcon>
<ActionIcon radius="sm" aria-label="delete"><TrashIcon /></ActionIcon>
<ActionIcon radius="md" aria-label="delete"><TrashIcon /></ActionIcon>
<ActionIcon radius="lg" aria-label="delete"><TrashIcon /></ActionIcon>
<ActionIcon radius="xl" aria-label="delete"><TrashIcon /></ActionIcon>
<ActionIcon radius="50%" aria-label="delete"><TrashIcon /></ActionIcon>Disabled & loading
<ActionIcon disabled aria-label="disabled"><SearchIcon /></ActionIcon>
<ActionIcon loading aria-label="loading"><SearchIcon /></ActionIcon>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'filled'|'light'|'outline'|'subtle'|'transparent'|'white'|'default' | 'filled' | Visual style |
color | UiColor | — | Theme color applied per variant |
size | 'xs'|'sm'|'md'|'lg'|'xl'|number|string | — | Width and height (number → rem) |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border-radius |
disabled | boolean | — | Prevents interaction, applies disabled styling |
loading | boolean | — | Shows loading state, prevents interaction |
component | string | 'button' | Root element override |
aria-label | string | — | Required accessible label for icon-only buttons |