Usage
An icon button is a compact button that shows an icon and no label. Use it for a frequent action in a tight space, such as an app bar or a list row, and only when the icon on its own makes the action clear.
- Use for actions familiar enough to be recognized from an icon alone.
- Use an icon button when the action needs a word to be understood (use a text button).
- Use an icon that could stand for more than one action.
Design properties
| Property | Values | Default |
|---|---|---|
| State Variant | Enabled | Hovered | Focused | Pressed | Disabled | Enabled |
| Selected Variant | False | True | False |
Types
Standard
Use as the default icon button in app bars, toolbars, and list rows.
Behavior and interaction
Behavior
- The icon button responds to touch with a ripple or highlight that confirms the input.
- Six states are designed: enabled, hovered, focused, pressed, disabled, and selected where the button toggles.
Positioning
- Keep the touch target at least 48×48dp, even though the icon inside it is typically 24dp.
- Leave at least 8dp between an icon button and anything else that can be touched.
- Align icon buttons to container edges or baselines, such as the trailing edge of a card, row, or list item.
- In compact layouts, keep the essential actions and group or hide the rest.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Oct 10, 2025 |
1.0.0 |
Initial draft of guidance |