Icon button
Icon button is used for buttons that show an icon in place of a text label.
On this page
On this page
Usage
Use an icon button when the purpose of your button may be easily understood using an icon in place of a text label.
Best practices
- Verify that the button's purpose will still be understood using an icon without a text label. Consider your audience and the context where the button is being rendered.
- Use a tooltip with a text label for the button so users can hover or focus the button to read a button label that makes it clear what the button does.
Options
Icon buttons have the same size and variant options as a button with a text label.
Accessibility
Even though the label is visually hidden, a text label needs to be defined so a screen reader can read that label to the user.