Icon Button
A compact icon-only control for an action.
IconButton triggers a familiar compact action, such as closing a panel, deleting a row, or adding
an item. Give every icon button an accessible name because it has no visible label.
import { IconButton } from '@luke-ui/react/icon-button';
<IconButton aria-label="Add item" icon="add" />;Accessibility
Provide aria-label or aria-labelledby for every icon button. Name the action, not the icon.
<IconButton aria-label="Search orders" icon="search" />Use a labelled Button when the icon is unfamiliar or visible text
would make the action clearer.
Appearance
IconButton uses the same tone and appearance options as
Button. Use danger for a destructive action. Choose subtle or
ghost when a secondary control needs less emphasis.
Size
medium is the default. Use small for compact toolbars and dense row actions. Keep controls in a
group at the same size.
Pending and disabled states
Set isPending while an action is running. The control remains focusable, ignores further presses,
and replaces its icon with a busy cue. Set isDisabled when the action is unavailable. Disabled
controls cannot receive focus or be pressed.