Icon buttons allow users to take actions, and make choices, with a single click or tap.
Our design system distinguishes four icon button types for specific needs.
- Standard
- Outlined
- Contained
- CTA (Call To Action)
Icon buttons communicate actions that users can take. In general, use icon buttons as an alternative to buttons for interface actions where your user interface benefits from a more compact design.
- Container
- Icon
- Border
- Fill
Icon buttons always have a container and an icon regardless of type and state.
- Standard – The default type of icon button to use in your UI. Use a standard icon button when none of the other icon button types are applicable. Standard icon buttons are low emphasis buttons typically used for less-pronounced actions where space is limited, including those located in dialogs and cards. In cards, icon buttons help maintain an emphasis on card content.
- Outlined – Low-emphasis icon buttons that always have the visual appearance of a button (unlike standard icon buttons which appear as just an icon in the enabled state). Use outlined icon buttons for optional actions where space is limited. Outlined icon buttons can be used interchangeably with standard icon buttons.
- Contained – Medium emphasis buttons, offering a lower emphasis alternative to CTA icon buttons or a higher emphasis alternative to outlined icon buttons. Use emphasis icon buttons for actions that are important but aren't the primary action and where space is limited.
- CTA (Call To Action) – Prominent, high-emphasis buttons that represent primary actions. Use a CTA icon button where space is limited as an alternative to a CTA button.
Icon buttons are interactive components that respond visually to user actions and system-initiated events.
Icon buttons are Interactive components that provide visual feedback when the pointer hovers over them.
Enabled (top) and hover (bottom) states for standard (A), outlined (B), contained (C), and CTA (D) icon buttons. The key visual difference is a bottom shadow in the hover state.
The primary action area of an icon button is the button surface. Click or tap an icon button to initiate the action linked to it. If an icon button is in the disabled state, no action will take place.
An icon button may perform a supplemental action when you click or point the cursor at it. For example, it may display a menu.
Our icon buttons have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For more information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.
For more information about icon buttons, see:
- Material UI – Components > Input > Button > Icon Buttons
Related components: