Iconbutton
IconButton provides an interactive button component that displays only an icon, ideal for compact UIs where space is limited and actions are easily recognizable through iconography.
Usage Guidelines
IconButtons should be used when the action can be clearly communicated through iconography alone. They're perfect for common actions that users can easily recognize without accompanying text.
When to Use IconButtons
- Space-constrained interfaces: Toolbars and compact layouts
- Secondary actions: Edit, delete, share, or favorite actions
- Universal actions: Widely recognized actions like play, pause, or close
When to Avoid IconButtons
- Primary actions: Use regular buttons with text for main CTAs
- Complex actions: Actions that require explanation or context
- Ambiguous icons: When the icon meaning isn't universally clear
Accessibility Best Practices
Essential Requirements
- aria-label: Always provide descriptive labels
- Minimum size: Ensure at least 44px touch targets for mobile
- Visual feedback: Clear hover and focus states
Design Guidelines
Icon Selection
- Recognizable icons: Use widely understood icons from established libraries
- Consistent style: Maintain visual consistency across all icons
- Scalable icons: Use vector icons that scale clearly at different sizes
Layout and Spacing
Maintain minimum 8px spacing between IconButtons and group related actions together with logical order.
Common Patterns
Toolbar Actions: Edit, share, delete actions in toolbars. List Item Actions: Quick actions for items in lists or tables. Media Controls: Play, pause, skip controls. Navigation: Back, forward, close, menu toggles.
Props
The IconButton component accepts all standard button props plus additional customization options:
| Prop | Type | Default | Description |
|---|---|---|---|
| children | node | - | The icon element to display inside the button |
| size | 'small' | 'medium' | 'large' | 'medium' | The size of the IconButton |
| color | 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit' | The color of the IconButton |
| disabled | bool | false | If true, the IconButton is disabled |
| onClick | func | - | Callback fired when the IconButton is clicked |
| aria-label | string | - | Accessibility label for screen readers (required) |
| sx | object | - | System prop for custom styling |
Best Practices
- Always include aria-label: Essential for accessibility and screen readers
- Use recognizable icons: Choose icons that clearly represent the action
- Maintain adequate spacing: Ensure sufficient space between IconButtons
- Consider touch targets: Use appropriate sizes for mobile interfaces
