Lays out related buttons in a row with one shared gap and alignment.
import { ButtonGroup } from "@/fragments/ui";Source<ButtonGroup>
<Button variant="soft">Cancel</Button>
<Button variant="solid">Save</Button>
</ButtonGroup>npx @usefragments/cli add buttongroupWrites src/fragments/ui/components/ButtonGroup plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Four gap steps, from touching to airy.
import { Stack } from '@/components/Stack';
<Stack direction="column" gap="md">
<ButtonGroup gap="none">
<Button variant="soft" size="sm">None</Button>
<Button variant="soft" size="sm">Gap</Button>Pins the row to the left, centre, or right of its container.
import { Stack } from '@/components/Stack';
<Stack direction="column" gap="md">
<ButtonGroup align="start">
<Button variant="soft" size="sm">Start</Button>
<Button variant="soft" size="sm">Aligned</Button>Buttons drop to a second line instead of overflowing.
<ButtonGroup wrap>
<Button variant="soft" size="sm">Approve</Button>
<Button variant="soft" size="sm">Request changes</Button>
<Button variant="soft" size="sm">Reassign reviewer</Button>
<Button variant="soft" size="sm">Move to backlog</Button>
<Button variant="soft" size="sm">Archive</Button>Right-aligned pair, named for screen readers.
<ButtonGroup align="end" role="group" aria-label="Form actions">
<Button variant="ghost">Cancel</Button>
<Button variant="solid">Submit</Button>
</ButtonGroup>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 |