Icon Button
A square, icon-only button for actions a toolbar has no room to spell out.
aria-label isn't optional
It's typed as required because an icon-only button has no accessible name without it — to a screen reader it would just be "button". Pair it with a Tooltip carrying the same words for sighted users.
Variants
Sizes
Disabled
Props
Every other native button attribute is forwarded to the underlying <button>.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | LucideIcon | The icon component itself, not an element: pass Settings, not <Settings />. | |
| aria-label | string | Required. There's no visible text, so this is the only name the control has. | |
| variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'secondary' | Visual weight, matching Button's variants. |
| size | 'sm' | 'md' | 'lg' | 'md' | Square dimensions. |
| disabled | boolean | false | Disables the button. |
| onClick | (e: MouseEvent<HTMLButtonElement>) => void | Click handler. |