IconButton

Button

Icon-only button with size variants, accessibility labels, and interaction states

IconButton

A compact button designed specifically for icons. Perfect for toolbars, lists and action menus.

Basic usage

Pass an icon via the icon prop. Use internal state for toggles like favorite, mute, and play/pause.

Like
Sound on
Paused

Variants & colors

Use different variant and color props to match emphasis and intent.

Variants

Colors

Loading & disabled states

Show progress with loading and prevent interaction with disabled.

Loading
Disabled

Usage Guidelines

When to Use

  • Toolbar icons
  • Close buttons
  • Toggle buttons

Accessibility

  • Requires aria-label for screen readers
  • Focus visible indicator

Performance

  • Icon components tree-shakable
  • CSS-only states

Common Mistakes

  • Missing aria-label
  • Icon not conveying action clearly

Frequently Asked Questions

Use IconButton when the action is clear from context and an icon alone is sufficient, like close or menu buttons.
Yes, always provide aria-label for IconButton to ensure accessibility for screen readers.

View on GitHub

See the full source code on GitHub

Related Components

View all
Button

Primary action component with variant system, size options, loading states, icon slots, and optional shimmer effects

ButtonGroup

Grouped button layout with shared borders, orientation control, and seamless visual connection between actions

FloatingActionButton

Fixed-position FAB for primary screen actions with animation, positioning options, and extended label support

PlayButton

Specialized media control button with play/pause state visualization and audio-visual feedback

Previous

HoverCard

Next

Image