A square, icon-only button. See Button for the text/icon+text
case. aria-label is required, not optional — an icon-only control has no visible text, so
without it the button is silently unusable for anyone on a screen reader.
tsx
<IconButton aria-label="Delete" icon="trash" variant="outline" />aria-label
icon
variant
Examples
Same variant/size scale as Button, so an icon-only action fits right alongside text buttons
in the same toolbar:
tsx
<Row gap="8">
<Button variant="ghost">Cancel</Button>
<IconButton icon="trash" aria-label="Delete" variant="ghost" />
</Row>aria-label should describe the action, not restate the icon — "Delete item", not "Trash icon":
tsx
<IconButton icon="close" aria-label="Close dialog" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| aria-label * | text | — | Required, not optional: an icon-only control has no visible text, so without this it's silently unusable for anyone on a screen reader. See components/Icon/Icon.tsx — `title` there is for a decorative-vs-labeled choice; here there's no visible label to fall back on, so it isn't one. |
| disabled | boolean | — | — |
| href | text | — | — |
| icon | warning | menu | search | circle | filter | chevron-down | chevron-up | chevron-left | chevron-right | close | check | plus | minus | arrow-right | arrow-left | info | eye | eye-off | trash | edit | copy | download | upload | external-link | star | calendar | clock | user | settings | more-horizontal | refresh | lock | maximize | minimize | — | One of the built-in icons, sized to match `size` automatically. Omit in favor of `children` for a custom icon element. |
| size | s | m | l | "m" | — |
| variant | solid | outline | ghost | "ghost" | — |