Primitives
IconButton
A square, icon-only action with a required name
Usage
import { IconButton, Stack, useTheme } from "@gpuixui/primitives";
import { Icon } from "@gpuixui/icons";
const theme = useTheme();
<Stack direction="row" gap="2xs">
<IconButton
label="Delete layer"
icon={<Icon name="trash" color={theme.colors.destructiveForeground} />}
variant="destructive"
onActivate={removeLayer}
/>
<IconButton
label="Layer settings"
icon={<Icon name="settings" color={theme.colors.foreground} />}
onActivate={openSettings}
/>
</Stack>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
label | string | required | the accessible name; never derived from the glyph |
icon | ReactNode | required | the glyph painted inside the button |
variant | ButtonVariant | "ghost" | the paint from core/variants.ts |
size | "sm" | "md" | "lg" | "md" | square side from density.controlHeight |
disabled | boolean | false | blocks activation; out of the Tab order (tabIndex: -1) |
loading | boolean | false | spinner, busy description, blocks activation |
loadingLabel | string | loading.busy ("Loading") | the busy word, announced as the description and the spinner's name; a blank one silences both |
reducedMotion | boolean | the motion provider | holds the busy spinner's lit dot; the prop overrides the provider |
onActivate | (event: EventPayload) => void | none | click or activating key; not called while busy |
onClick / onKeyDown / onKeyUp / onFocus / onBlur | host handlers | none | composed with the button's own; a click is observed first, an activating key acts first |
onMouseEnter / onMouseLeave / aria-description | TooltipTriggerProps | none | forwarded to the press target, so the control can be a Tooltip trigger |
ref | Ref<PublicInstance> | — | the element itself |
aria-expanded / aria-selected | boolean | — | announced state, forwarded through ActionHostProps |
tabIndex | number | 0, or -1 while disabled | the action's Tab stop; see Button's row — a leaving surface names -1 for the close action it keeps painted |
className | string | — | a Tailwind string joined after the recipe |
style | StateStyle<ButtonState> | — | resolved against { disabled, focused }, merged last |
testId | string | — | stable locator |
Edit this page on GitHubpackages/primitives/docs/icon-button.mdx