Button Group

Groups related buttons into a single connected row with shared borders. Enable separator to add thin dividers between items, which pairs well with the soft variant for a lighter visual treatment.

1<ButtonGroup>
2  <Button color="neutral" variant="solid">Undo</Button>
3  <Button color="neutral" variant="solid">Redo</Button>
4  <Button color="neutral" variant="solid">Reset</Button>
5</ButtonGroup>
6

Usage

1import { Button, ButtonGroup } from "atlas";
2
3<ButtonGroup>
4  <Button color="neutral" variant="solid">Undo</Button>
5  <Button color="neutral" variant="solid">Redo</Button>
6  <Button color="neutral" variant="solid">Reset</Button>
7</ButtonGroup>
8

Examples

Default
The default ButtonGroup joins its children into a single connected row with shared borders and no separators.
1<ButtonGroup>
2  <Button color="neutral" variant="solid">Undo</Button>
3  <Button color="neutral" variant="solid">Redo</Button>
4  <Button color="neutral" variant="solid">Reset</Button>
5</ButtonGroup>
6
Soft with separator
Set separator to insert thin vertical dividers between each button. This works best with the soft variant where the dividers are clearly visible.
1<ButtonGroup separator>
2  <Button color="neutral" variant="soft">Copy</Button>
3  <Button color="neutral" variant="soft">Paste</Button>
4</ButtonGroup>
5
Formatting
A common pattern for text formatting controls, grouping related actions into a compact toolbar.
1<ButtonGroup separator>
2  <Button color="neutral" variant="soft">Bold</Button>
3  <Button color="neutral" variant="soft">Italic</Button>
4  <Button color="neutral" variant="soft">Underline</Button>
5</ButtonGroup>
6
Icon toolbar
Solid and soft variants with IconButton children. Icon-only groups are ideal for dense toolbars where space is limited.
Split button
Combine a primary action with a DropdownMenu trigger to create a split button. The main button handles the default action while the chevron opens a menu of alternatives.
1<ButtonGroup>
2  <Button color="neutral" variant="solid">Save</Button>
3  <DropdownMenu items={items}>
4    <IconButton variant="solid" icon={<IconChevronDownMedium />} aria-label="More options" />
5  </DropdownMenu>
6</ButtonGroup>
7
With DropdownMenu
Group visible actions alongside a trailing DropdownMenu trigger for overflow or less common operations.
1<ButtonGroup separator>
2  <Button color="neutral" variant="soft">Edit</Button>
3  <Button color="neutral" variant="soft">Duplicate</Button>
4  <DropdownMenu items={items}>
5    <IconButton variant="soft" icon={<IconChevronDownMedium />} aria-label="More" />
6  </DropdownMenu>
7</ButtonGroup>
8
Disabled
Set disabled on the group to disable every child button at once, rather than disabling each one individually.
1<ButtonGroup disabled>
2  <Button color="neutral" variant="solid">Undo</Button>
3  <Button color="neutral" variant="solid">Redo</Button>
4  <Button color="neutral" variant="solid">Reset</Button>
5</ButtonGroup>
6

API Reference

PropTypeDefault
disabledbooleanfalse
separatorbooleanfalse

Related

  • Button for standalone action triggers
  • Icon Button for compact, icon-only actions within groups or toolbars