Components / Controls
Icon button
An icon-only button that always has a name: 44px, a tooltip on hover and on keyboard focus, an optional shortcut.
@fabrials/ui
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { IconButton } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
label | string | The name: aria-label, or a hidden text node with textName. Required, because an icon is not a name. |
tooltip | boolean | ReactNode | Repeats the name for sighted people. true by default; false leaves it out; a node replaces the text. |
shortcut | string | string[] | { keys, sequence?, separator? } | Keys shown as flat Kbds in the tooltip and exposed as aria-keyshortcuts ("⌘" is Meta, "Esc" is Escape). { keys: ["g", "i"], sequence: true } is pressed one after the other: the tooltip says "g then i" and no aria-keyshortcuts is set, because it cannot express steps. |
textName | boolean | Names the button with a visually hidden text node instead of aria-label, for toolbars whose tests or voice control read textContent. |
size | icon | icon-sm | icon-xs | icon-lg | icon-lg (44px) by default; every size is 44px on touch. |
variant | Button variants | ghost by default. |
loading | boolean | Swaps the icon for the spinner and blocks repeated presses. |
Behavior
Do not add title: the tooltip already repeats the name. It spreads its props on the Button, so a Base UI trigger can render it: <DropdownMenuTrigger render={<IconButton label="More">…</IconButton>} />. The tooltip wrapper stays mounted when the button is disabled.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.