Icon Button

Usage

This component is used to display supplementary actions in the interface, either to trigger actions or drive navigation is allowed. They cannot be used as the main call to action.

Best practices

Do

Use secondary as the default icon color for this component.

Don't

Do not use an icon that does not drive a clear and direct action.

Do

Use it where text labels don’t fit. Remember always to add an aria-label.

Don't

Do not display more than 5 buttons in a row. Be conscious of the number of options and the space available. To avoid that cognitive load, use a dropdown instead.

Examples

Live Preview

Props

Fetching props...