Icon Button
Icon buttons are buttons without visible text labels.
Icon buttons are also appropriate for toggle buttons that allow a single or multiple choice to be selected or deselected, such as adding or removing a star to an item, or giving a thumbs up or thumbs down on an order survey.
Best Practices
Icon Buttons should:
- Follow the same general guidelines as EzButton
- Include an accessible label with
ariaLabel - Be used to perform an inline action on a page when there's no room for a default button
- Be used only when the icon is clear and understandable
Icon Buttons should not:
- Be used as the main action on a page - use EzButton instead
Examples
Basic Icon Buttons
EzIconButton supports filled (default), outlined, and basic variants.
Icon Button Actions
Icon buttons accept an onClick prop for performing actions on click and onKeyDown for performing actions on a key down.
For destructive actions, set the button's color to common.destructive.
Icon Button Colors
EzIconButton supports theme palette properties (primary, secondary, error, warning, info, and success) as well as all supported theme colors (ex. common.black). Text and background colors should have high enough contrast for accessibility.
By default, the color passed to EzIconButton will also be passed to the child element (EzIcon) for outlined and basic variants. For filled icon buttons, the default color passed is common.white. The child element color prop can be overwritten if a different icon color is needed.
Icon Button Sizes
If you want to specify an icon button size, use the size property. We currently support small, medium (default), and large.
Icon button sizes only affect icon button padding. To change the size of the EzIcon within EzIconButton, add a size property to EzIcon.
Disabled Icon Buttons
Disabled icon buttons can be used to prevent users from doing an invalid or unavailable action.
In general, you should consider removing options that are not available or not applicable, but in some cases showing a disabled icon button may be necessary. In these cases, be sure to provide context for why the action is unavailable either with a message, or tooltip.
An icon button can be made disabled by adding the optional disabled prop. Disabled icon buttons do not respond to user input and therefore will not trigger onClick behavior.
Custom Styles
Supported styles should be used, but if you need to overwrite styles for the background, text, icon, or border, you can do so using provided class names (EzIconButton, EzIconButton-[variant], and EzIconButton-disabled).
Accessibility
See WAI-ARIA accessibility guidelines for buttons.
All icon buttons require an accessible label provided with ariaLabel.
If you need to hide an icon button from all accessibility APIs, for example to avoid confusion when using a call-to-action button inside an interactive card, add the ariaHidden prop to the icon button.
Props
| Name | Type | Default | Description |
|---|---|---|---|
ariaLabel* | string | The aria-label of the element. | |
children* | node | The wrapped icon of the icon button. | |
ariaHidden | boolean | false | If true, the component is hidden from accessibility APIs. |
color | EzThemeColors | primary | The color of the component. Supports theme palette properties and colors. |
disabled | boolean | false | If true, the component is disabled. |
onClick | func | Callback fired when the icon button is clicked. | |
onKeyDown | func | Callback fired when the icon button is focused and an event key is pressed. | |
size | small | medium | large | medium | The size of the component. |
type | button | submit | reset | button | The type of the button. |
variant | filled | outlined | basic | filled | The variant of the component. |