Buttonchild
ButtonGroup contains Button componentsButtonGroup
Groups related buttons together with consistent spacing and alignment. Useful for action bars, toolbars, and related button sets.
Setup
import { ButtonGroup } from '@fragments-sdk/ui';Examples
Default
Basic button group with default spacing
Loading preview...
Gap Variants
Different spacing options
Loading preview...
Alignment
Different alignment options
Loading preview...
Form Actions
Common pattern for form submit/cancel
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Button elements to group together |
gap | enumnonexssmmd | sm | Spacing between buttons |
wrap | boolean | false | Allow buttons to wrap to next line |
align | enumstartcenterend | Not set | Alignment of buttons |
Usage Guidelines
When to use
- Grouping related actions together
- Creating toolbars or action bars
- Form submit/cancel button pairs
- Pagination controls
When not to use
- Unrelated buttons (use Stack instead)
- Navigation links (use nav element)
- Single button (no grouping needed)
Best practices
- Keep button groups focused on related actions
- Use consistent button variants within a group
- Consider visual hierarchy - primary action should stand out
- Limit to 2-4 buttons per group for clarity
- Pass role/aria-label/id/data-* directly to ButtonGroup when you need semantic grouping hooks
Accessibility
- Group provides semantic relationship between buttons
- Each button remains individually focusable
- Consider using role="group" with aria-label for screen readers