Skip to main content


IconButtons are actionable buttons that only display an icon. Since there is no standard label, it's critical to include a tooltip with all IconButtons so the label can be accessed upon hover.

Live Editor
<IconButton tooltip="Add new" name="plus" />


  • Always include the button's 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 an aria-label and the tooltip will be removed.
  • When using an IconButton together with text, ensure they are aligned by adding a wrapper with display: flex and align-items: center.
  • Use in areas that are limited in space and are in a low-context environment.
  • Make sure the icon's significance is clear and unambiguous.
  • Use IconButton instead of a Button when only an icon is needed.


  • Avoid using it in high-context situations.

Types and behaviors


PrimaryGhostUsed for primary-based actions. Only use one per section. If there is no primary action, all Button components should be secondary.
SecondaryGhostThis is the default-styling for buttons. It's used most frequently within Grafana and can trigger a variety of actions.
DestructiveGhostThis is used for delete actions.
DisabledGhostUse this if the functionality the IconButton provides is not currently available, but the IconButton needs to indicate that this function exists.


  • Icon
  • Container (on hover)


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


  • 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.



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