ACTIONS / COMPONENTS
Icon button
A compact action with an accessible name.
About icon button
Icon Buttons save space, make things more intuitive, and help users quickly understand and use different features in an app or on a website. They're like visual shortcuts that make navigating and using software simpler and more user-friendly.
01
Anatomy
Shared parts, named consistently.
1V1 · COMPACT
- 1Tooltip labelContainerRequired
The container of the Icon Button.
- 2Tooltip labelTooltip
A Tooltip is used to provide more information to the user.
- 3Tooltip labelIconRequired
The icon of the Icon Button.
Try the default
A working example with the shared V1 visual language.
When to use
Use for familiar actions in toolbars. Supply a clear label and a supplementary tooltip.
Tab focuses; Enter and Space activate. The accessible name describes the action.