Overview

Key features

1. Emphasis Levels
   Supports: high, and low — to communicate priority within the UI.
2. Sizes
   Available in: xs, sm, md, and lg — for seamless integration across layouts and devices.
3. Item Types
   Each toggle item can be a standard button or an icon-only button, depending on the use case.
4. Icon Support
   Toggle items can include a leading and/or trailing icon for better clarity and context.
5. Selection Behavior
   Supports both single and multiple selection modes.

Anatomy

1. Button: A standard button can optionally include a leading and/or trailing icon.
2. Icon Button: Displays an icon-only version, useful when space is limited or labels are unnecessary.

Look and feel

Emphasis

Supports four emphasis levels – high and low – 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

Each toggle item responds visually to different interaction states:

• Default: Unselected state
• Selected: Highlighted appearance indicating active selection
• Hover: Item under pointer gets visual emphasis
• Focus: Shows a focus ring to indicate keyboard navigation
• Disabled: Prevents interaction, styled with reduced contrast

 

Best Practice

✅ Do:

1. Use clear labels or icons that reflect the toggled state.
2. Apply emphasis levels to signal importance or urgency.
3. Consider group behavior: single vs multiple selection.

🚫 Don’t:

1. Mix different emphasis levels in a single Togglegroup

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.