Component · Actions · 02
Icon Button
Icon Button = a square control whose real label is an aria-label; the glyph illustrates, it does not identify.
Duplicate
What is a Icon Button?
An icon button trades words for a glyph. Name the hit area, the shape, and the label that screen readers get.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- A button whose content is a single glyph with no text label. Always give it an aria-label.
- The text that names a field; keep it short and place it above the input.
- A control that cannot be interacted with; show it dimmed and non-focusable.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- How the control reacts on pointer-over: lift, tint, or border change. Name it so the model does not guess.
- The keyboard-focused state — a visible ring or border change. Never remove it.
- Say this state explicitly in the prompt.
- A control that cannot be interacted with; show it dimmed and non-focusable.
Anatomy
These are the parts to name in your prompt.
- 01 Surface
- 02 Glyph
- 03 Focus ring
When to use
- Toolbars where every action repeats — bold, align, share
- Row actions in dense tables and lists
- Close and dismiss affordances in cards and toasts
Avoid when
- The icon is not universally understood — pair it with a text label
- It is the single primary action on the page — use a Button
- Two icons sit in the same corner with different meanings
Write the aria-label before picking the glyph — if you cannot name the action in two words, the icon is wrong.
See also
Create an icon button component.
STYLE
- square 36px surface, 10px radius, 20px glyph
- neutral: transparent surface, #6E6E73 glyph, #F5F5F7 hover
- one primary icon button: #0071E3 surface, white glyph
- 2px focus ring in accent, offset 2px
STATES
- default, hover, focus-visible, active, disabled at 40% opacity
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui