Figma component
Healthy
Show details
Overview
Key features
-
Emphasis Levels
Available in: high, medium, low, and lower — helping you define visual priority based on context. -
Sizes
Supports multiple sizes: xs, sm, md, and lg — ensuring adaptability across layouts and touch targets. -
Item Types
Each item within the group can be a standard button or an icon button, depending on the use case. -
Icon Support
Items can include both leading and/or trailing icons for greater clarity and usability.
Anatomy
- Button: A standard button can optionally include a leading and/or trailing icon.
- Icon Button: Displays an icon-only version, useful when space is limited or labels are unnecessary.
Look and feel
States
The component responds to user interactions through the following states:
- Default: Standard appearance when inactive.
- Hover: Highlighted on pointer hover.
- Focus: Shows a focus ring (visible in development environments).
- Active: Represents user interaction, such as click or tap.
- Disabled: Prevents interaction, styled with reduced contrast.
Emphasis
Supports four emphasis levels – high, medium, low, and lower – to adapt visual hierarchy based on context. Each level adjusts background, border, and icon color to reflect priority
Sizes
The ButtonGroup supports four sizes: xs , sm , md , lg .
Choose based on the context, layout, and required touch targets.
States
The component responds to user interactions through the following states:
- Default: Standard appearance when inactive.
- Hover: Highlighted on pointer hover.
- Focus: Shows a focus ring (visible in development environments).
- Active: Represents user interaction, such as click or tap.
- Disabled: Prevents interaction, styled with reduced contrast.
Best Practice
You can refer to the Button article for best practises
Links
The Figma file contains the latest UI designs, while the links to Web Component, Blazor, Angular, React, and VueJS provide a live demo of components in various states, themes, and interactions.
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.