IconButton ready Storybook
IconButton
s 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.
Loading...
Live Editor
<IconButton tooltip="Add new" name="plus" />
Do’s
- 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 withdisplay: flex
andalign-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 aButton
when only an icon is needed.
Don’ts
- Avoid using it in high-context situations.
Types and behaviors
Variants
Type | Style | Purpose |
---|---|---|
Primary | Ghost | Used for primary-based actions. Only use one per section. If there is no primary action, all Button components should be secondary. |
Secondary | Ghost | This is the default-styling for buttons. It's used most frequently within Grafana and can trigger a variety of actions. |
Destructive | Ghost | This is used for delete actions. |
Disabled | Ghost | Use this if the functionality the IconButton provides is not currently available, but the IconButton needs to indicate that this function exists. |
Anatomy
- Icon
- Container (on hover)
Placement
IconButton
s 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 size | Name & size in Figma | Name & size in code |
---|---|---|
12px | small: 20px | xs: 20px |
14px | sm: 22px | |
16px | medium: 28px | md: 24px |
18px | lg: 26px | |
24px | large: 48px | xl: 32px |
24px | xxl: 32px | |
24px | xxxl: 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.