IconButton
A square native icon action with a required accessible name and matching tooltip.@gemologic/sheen · primitivesPlayground
<IconButton label="More actions" loading={false} placement="top" size="md" tone="neutral" type="button" variant="ghost"><span>⋯</span></IconButton>Variant matrix
More actions
type: button
type: submit
type: reset
variant: solid
variant: soft
variant: outline
variant: ghost
variant: link
tone: neutral
tone: accent
tone: danger
tone: success
size: xs
size: sm
size: md
size: lg
placement: top
placement: bottom
placement: left
placement: right
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/IconButton.tsx- Tokens
--sheen-button-radius--sheen-control-h-md--sheen-color-accent--sheen-color-bg-raised--sheen-elevation-raised--sheen-duration-fast--sheen-icon-size-md
Accessibility
Role: buttonKeyboard: Tab, Shift+Tab, Enter, Space, Escape dismisses tooltipDo
- Describe the action, not the icon's appearance.
- Supply noninteractive icon content; the label provides its accessible name.
Do not
- Do not nest interactive controls or use this for navigation.
- Do not duplicate a typed shortcut action with a separate useShortcut registration.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Required nonempty action name, also shown in the tooltip. |
children * | JSX.Element | — | Required noninteractive icon content, hidden from the accessible name. |
type | "button" | "submit" | "reset" | button | Native action, submission, or reset behavior. |
shortcut | string | import("../index.ts").ShortcutAction | — | A string displays a hint only; a typed shortcut action also registers the trigger and displays its platform-formatted binding. |
variant | NonNullable<"solid" | "soft" | "outline" | "ghost" | "link" | undefined> | undefined | ghost | Visual treatment; solid accent actions should be rare. |
tone | NonNullable<"neutral" | "accent" | "danger" | "success" | undefined> | undefined | neutral | Semantic color role, independent of visual treatment. |
size | NonNullable<"xs" | "sm" | "md" | "lg" | undefined> | undefined | md | Density-aware control size. |
loading | boolean | false | Marks pending work and disables activation. |
placement | "top" | "bottom" | "left" | "right" | top | Preferred side, with viewport collision handling. |
openDelay | number | 500 | Hover opening delay in milliseconds; keyboard focus opens immediately. |
closeDelay | number | 100 | Pointer departure delay in milliseconds, preserving a hoverable path to the content. |