Components · Actions

Icon button

A square, label-free action for toolbars and dense surfaces — a 32px ghost button holding a single 16px icon. Because it shows no text, an accessible name is mandatory.

Preview

Light

Dark

Accessibility

Spec

Values and token references straight from the Zetta spec.

button-icon

backgroundColor: transparent
iconColor: {colors.ink}
borderColor: transparent
borderWidth: 1px
borderRadius: {rounded.base}
width: 32px
height: 32px
iconSize: {icons.sizeMap.sm}
cursor: pointer
display: flex
alignItems: center
justifyContent: center

button-icon-hover

backgroundColor: {colors.surface-muted}

button-icon-active

backgroundColor: {colors.surface-pressed}

button-icon-focus

outline: 2px solid {colors.border-focus}
outlineOffset: 2px

button-icon-disabled

iconColor: {colors.disabled-text}
cursor: not-allowed

Build with the skill

No package to install — hand this to your AI to generate the icon button in your stack.

Prompt for your AI

Implement the Zetta "Icon button" component in this project's stack using the zetta-design-md skill.

- Apply the `icon-button` spec from the skill (variants: default, hover, disabled).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

32×32, base radius, transparent fill, ink icon; hover fills surface-muted, active surface-pressed. Same 2px focus ring as every button.
Use only for universally understood glyphs (close, more, edit). When the meaning is ambiguous, use a labelled button or pair the icon with a tooltip.

Accessibility

13Always provide an aria-label — an icon alone is not a name. The 32px box plus surrounding spacing should reach a 44px touch target on touch surfaces.