Skip to content
v2.5.0
English
Русский
Documentation

IconButton

IconButton is the icon-only action variant built on the same button foundation as Button.
StorybookSourceFigma

Labeling

Always provide an explicit accessible label because visible text is usually absent.

Keyboard Behavior

AnnouncementFocus the demo and press a key from the table.
KeyAction
EnterSpaceActivates the focused button. It is a native <button>; with asChild the child element keeps its own keys, so a link reacts to Enter only.
Every row is checked in a real browser: Playwright presses the key in Chromium and checks where the focus and the active item land.
  • The action should remain understandable from the accessible name alone.

Focus Behavior

  • Focus should land on the interactive root.
  • Visible focus styling should remain intact after custom styling.

Screen Reader Semantics

  • The accessible name should come from aria-label or equivalent supported labeling.
  • Decorative icons should not be the only source of meaning.

Form Semantics

  • There is no default type: like a native <button>, IconButton submits the surrounding form.
  • Set type='button' for actions that must not submit.
  • Use type='submit' only when an icon-only submit action is still clear in context.

Accessibility Risks

  • Missing aria-label.
  • Icon-only destructive actions whose meaning is not obvious.
  • Replacing clear text actions with icon-only affordances too early.