Usage notes
- Use for related actions that should feel grouped.
- Best for short sets of 2–5 buttons.
- Use ToggleGroup when the buttons represent on/off state.
Usage notes
- Always provide an accessible group label.
- Use aria-label or aria-labelledby on the group.
- Ensure focus order matches visual order.
Usage notes
- Horizontal is default for toolbars and headers.
- Use vertical in narrow layouts or menus.
- Keep orientation consistent within a section.
Usage notes
- Match button size to surrounding UI density.
- Use smaller sizes for compact toolbars or tables.
- Keep size consistent within the group.
Usage notes
- Use nested groups for pagination or sub-actions.
- Separate levels visually to avoid confusion.
- Avoid nesting unless the hierarchy is clear.
Usage notes
- Use separators to split related clusters.
- Good for primary vs secondary actions in one row.
- Avoid more than one separator per group.
Usage notes
- Use for a primary action with secondary options.
- Keep the primary action first.
- Pair the split action with a menu or popover.
Usage notes
- Use for search or quick actions attached to input.
- Align sizes and borders between input and buttons.
- Keep the action adjacent to the field.
Usage notes
- Use when multiple controls are tightly coupled.
- Limit to one input and one or two actions.
- Prefer icons when space is tight.
Usage notes
- Use when options are long or dynamic.
- Keep the label clear and scannable.
- Avoid hiding a primary action in the menu.
Usage notes
- Use for compact filters next to actions.
- Match widths so the group feels balanced.
- Keep the selection lightweight and reversible.
Usage notes
- Use for inline configuration or details.
- Keep popover content short and focused.
- Avoid complex flows inside the popover.