IconButton
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.
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.
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
Related Components
View allPrimary action component with variant system, size options, loading states, icon slots, and optional shimmer effects
Grouped button layout with shared borders, orientation control, and seamless visual connection between actions
Fixed-position FAB for primary screen actions with animation, positioning options, and extended label support
Specialized media control button with play/pause state visualization and audio-visual feedback