Skip to content

Icon button

Icon button is used for buttons that show an icon in place of a text label.

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.