> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
> Use this file to discover all available pages before exploring further.

# Button Group

> A container that groups related buttons together with consistent styling.

## Installation

<Tabs>
  <Tab title="CLI">
    ```bash theme={null}
    npx shadcn-svelte@next add button-group
    ```
  </Tab>

  <Tab title="Manual">
    <Steps>
      <Step title="Copy component code">
        Copy and paste the component source code into your project.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Usage

```svelte theme={null}
<script lang="ts">
  import * as ButtonGroup from "$lib/components/ui/button-group/index.js";
</script>

<ButtonGroup.Root>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup.Root>
```

## Accessibility

* The `ButtonGroup` component has the `role` attribute set to `group`.
* Use `tabindex` to navigate between the buttons in the group.
* Use `aria-label` or `aria-labelledby` to label the button group.

```svelte theme={null}
<ButtonGroup aria-label="Button group">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>
```

## ButtonGroup vs ToggleGroup

* Use the `ButtonGroup` component when you want to group buttons that perform an action.
* Use the `ToggleGroup` component when you want to group buttons that toggle a state.

## Examples

### Orientation

Set the `orientation` prop to change the button group layout.

### Size

Control the size of buttons using the `size` prop on individual buttons.

### Nested

Nest `ButtonGroup` components to create button groups with spacing.

### Separator

The `ButtonGroupSeparator` component visually divides buttons within a group.

Buttons with variant `outline` do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy.

### Split

Create a split button group by adding two buttons separated by a `ButtonGroupSeparator`.

### Input

Wrap an `Input` component with buttons.

### Input Group

Wrap an `InputGroup` component to create complex input layouts.

### Dropdown Menu

Create a split button group with a `DropdownMenu` component.

### Select

Pair with a `Select` component.

### Popover

Use with a `Popover` component.

## Links

* [Source Code](https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/button-group)