Skip to main content

IconButton
ready
Storybook

IconButtons are actionable buttons that show only an icon. Since there is no regular label it’s critical to include a tooltip with all IconButtons so the label can be accessible on hover.

Do’s​

  • Always include the button label in a tooltip
  • In exceptional cases where the tooltip does not make sense and the icon is unambiguous (e.g
    for expanding a folder): add aria-label and the tooltip will be removed.
  • When using IconButton together with text make sure to align them by adding a wrapper with display: flexand align-items: center
  • Use in areas that are limited in space and are low-context
  • Ensure the meaning of the icon is well understood and unambiguous
  • Use IconButton instead of Button with only an icon

Don’ts​

  • Do not use in hight-context situations

Variants​

TypeStylePurpose
PrimaryGhostUsed for primary-based actions, only use one per section. If there is no primary action, all Button components should be secondary.
SecondaryGhostDefault-styling of buttons, this style is used the most within Grafana and can trigger various actions.
DestructiveGhostUsed for delete actions
DisabledGhostIf the functionality the IconButton provides is not available but the IconButton is supposed to show that there is this kind of functionality.

Formatting​

Anatomy​

  • Icon
  • Container (on hover)

Placement​

IconButtons are best used in areas that are limited in space and are action-heavy. These could be toolbars or in areas that provide inline editing such as tables or cards.

Button Sizes​

icon sizename & size in Figmaname & size in code
12pxsmall: 20pxxs: 20px
14pxsm: 22px
16pxmedium: 28pxmd: 24px
18pxlg: 26px
24pxlarge: 48pxxl: 32px
24pxxxl: 32px
24pxxxxl: 32px

Accessibility​

  • Add a text for tooltip (it will also be used as the aria-label)
  • In exceptional cases where the tooltip does not make sense add the aria-label.

Behaviours​

Hover​

On hover, the IconButton displays a tooltip that includes the IconButton’s label.