Material Design 3Actions
Button Group
Button groups combine related actions into a single visual container. They help organize multiple actions that are conceptually related or operate on the same object.
Overview
Button groups are used to combine a set of related buttons into a cohesive unit. They can be horizontal or vertical, and support various button styles. Button groups differ from segmented buttons in that each button triggers an independent action rather than selecting options.
Live Preview
Variants
Outlined
Filled
Tonal
With Icons
Vertical Button Group
Outlined
Filled
Size Variants
Small
Medium
Large
Brand Properties
The following table shows Button Group properties with Material Design 3 defaults and brand-specific values.
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| Button Height (Small) | Dimension | 32px | 32px | 36px |
| Button Height (Medium) | Dimension | 40px | 40px | 48px |
| Button Height (Large) | Dimension | 48px | 48px | 56px |
| Corner Radius | Dimension | 8px | 9999px (pill) | 9999px (pill) |
| Horizontal Padding (Small) | Dimension | 12px | 12px | 12px |
| Horizontal Padding (Medium) | Dimension | 16px | 16px | 16px |
| Horizontal Padding (Large) | Dimension | 24px | 24px | 20px |
| Divider Width | Dimension | 1px | 1px | 1px |
| Border Width | Dimension | 1px | 1px | 1px |
| Border Color | Color | #79747E | #038012 | #1A5129 |
| Outlined Text Color | Color | #6750A4 | #038012 | #1A5129 |
| Outlined Hover Background | Color | #F5F5F5 | #F5F5F5 | #F5F5F5 |
| Filled Background | Color | #6750A4 | #038012 | #1A5129 |
| Filled Text Color | Color | #FFFFFF | #FFFFFF | #FFFFFF |
| Filled Divider Color | Color | white 20% | white 20% | white 20% |
| Tonal Background | Color | #E8DEF8 | primary + 20% | primary + 20% |
| Tonal Text Color | Color | #6750A4 | #038012 | #1A5129 |
| Icon Size | Dimension | 18px | 18px | 20px |
| Icon-Text Gap | Dimension | 8px | 8px | 8px |
| Font Family | Font | Roboto | Open Sans | Open Sans |
| Font Size (Small) | Font Size | 13px | 12px | 14px |
| Font Size (Medium) | Font Size | 14px | 14px | 16px |
| Font Size (Large) | Font Size | 16px | 16px | 18px |
| Font Weight | Font Weight | 500 | 500 | 600 |
| Disabled Opacity | Percentage | 38% | 50% | 50% |
Accessibility
- Use
role="group"witharia-labelfor the container - Each button should have clear, unique labels
- Support keyboard navigation between buttons with Tab
- Ensure minimum 44px touch target on mobile
- Maintain 4.5:1 color contrast for text
- Disabled buttons should have
aria-disabled
Do's and Don'ts
Do
- Group related actions together
- Use consistent button sizing within a group
- Order buttons by importance or frequency
- Use vertical groups for space-constrained areas
Don't
- Group unrelated actions together
- Include more than 5 buttons in a group
- Mix button styles within a group
- Use for selection (use segmented buttons instead)
Related Components
- Material Button - Individual action buttons
- Segmented Button - Selection buttons
- Split Button - Button with dropdown
- Icon Button - Icon-only buttons