Button Group

Group multiple buttons together with consistent styling and spacing.

Basic Usage

Horizontal (default)

Vertical

With separator

With input

Split button

Increment/decrement

Button GroupGroup related actions together

Installation

The ButtonGroup component is part of the UI package.

Usage

import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@mordecai-design-system/ui"

<ButtonGroup>
  <Button>Save</Button>
  <Button variant="outline">Cancel</Button>
</ButtonGroup>

Examples

Horizontal (Default)

<ButtonGroup orientation="horizontal">
  <Button>Left</Button>
  <Button>Center</Button>
  <Button>Right</Button>
</ButtonGroup>

Vertical

<ButtonGroup orientation="vertical">
  <Button>Top</Button>
  <Button>Middle</Button>
  <Button>Bottom</Button>
</ButtonGroup>

With Separator

<ButtonGroup>
  <Button>Copy</Button>
  <ButtonGroupSeparator />
  <Button>Paste</Button>
</ButtonGroup>

With Text

<ButtonGroup>
  <ButtonGroupText>$</ButtonGroupText>
  <Input placeholder="0.00" />
  <Button>Submit</Button>
</ButtonGroup>

Mixed Variants

<ButtonGroup>
  <Button variant="default">Primary</Button>
  <Button variant="outline">Secondary</Button>
  <Button variant="ghost">Tertiary</Button>
</ButtonGroup>

Sub-components

| Component | Description | |-----------|-------------| | ButtonGroup | Root container | | ButtonGroupSeparator | Visual separator between items | | ButtonGroupText | Static text element |

Props

ButtonGroup

Prop	Type	Default	Description
`orientation`	enum	—	—