Button Group
A segmented surface that follows the Paper Cut elevation budget — defaults to default (medium shadow), use elevated for whiteboard/canvas apps, and outlined inside cards. Lift is opt-in via lift.
Elevation
Three elevation levels for different contexts. Pick based on the surrounding UI hierarchy.
Best Practices
Elevated: Whiteboard & Canvas Apps
Use variant="elevated" for floating toolbars in creative applications like whiteboards, design tools, or canvas-based editors where the toolbar needs strong visual prominence against a large workspace.
Default: Standalone Toolbars
Use variant="default" for most toolbar use cases. This is the default and provides medium shadow for good visibility without being overwhelming.
Outlined: Inside Cards
Use variant="outlined" when the button group is inside a Card or another elevated container. This avoids double elevation.
Basic Button Group
Buttons grouped together as a single paper element with shared chromatic shadow.
Quantity Stepper
A compact stepper pattern using ButtonGroup with ButtonGroupText.
Text Formatting
A toolbar-style button group for text formatting actions.
Text Alignment
Toggle between alignment options with icon buttons.
With Separator
Use separators to visually divide button groups.
With Text Label
Combine buttons with text labels for context.
Split Button
A primary action with a dropdown for additional options.
Action Bar
A comprehensive action bar with multiple button groups.
View Switcher
Toggle between different view modes.
Vertical Orientation
Button groups can also be stacked vertically.
Different Button Sizes
Button groups adapt to their content while maintaining the paper effect.
Nested in Cards
When the button group is inside a Card (which already has elevation), use outlined to avoid stacking shadows.
Anti-patterns
Avoid stacking elevated surfaces inside another elevated container.
Click Feedback
All buttons have active/pressed state feedback. Click and hold to see the effect.
Group Press Effect:
Individual Button Highlight:
Each button highlights with accent color when clicked.