# Button group: Separators

> Separators between icon buttons, with a toggle that reports its pressed state.

Example: https://hextaui.com/docs/button-group/examples/player
Component docs: https://hextaui.com/docs/button-group.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/button-group-player.json
```

This adds `components/examples/button-group/player.tsx` with the Button group component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/button-group/player.tsx"
"use client"

import * as React from "react"
import {
  IconPlayerPause,
  IconPlayerPlay,
  IconPlayerSkipBack,
  IconPlayerSkipForward,
} from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { ButtonGroup, ButtonGroupSeparator } from "@/components/ui/button-group"

export function ButtonGroupPlayer() {
  const [playing, setPlaying] = React.useState(false)

  return (
    <ButtonGroup aria-label="Playback">
      <Button variant="secondary" size="icon" aria-label="Previous track">
        <IconPlayerSkipBack />
      </Button>
      <ButtonGroupSeparator />
      <Button
        variant="secondary"
        size="icon"
        aria-label={playing ? "Pause" : "Play"}
        aria-pressed={playing}
        onClick={() => setPlaying(!playing)}
      >
        {playing ? <IconPlayerPause /> : <IconPlayerPlay />}
      </Button>
      <ButtonGroupSeparator />
      <Button variant="secondary" size="icon" aria-label="Next track">
        <IconPlayerSkipForward />
      </Button>
    </ButtonGroup>
  )
}
```

## More Button group examples

- [Sizes](https://hextaui.com/docs/button-group/examples/sizes.md)
- [Split button](https://hextaui.com/docs/button-group/examples/split.md)
- [Feedback inside a group](https://hextaui.com/docs/button-group/examples/feedback.md)
- [Vertical](https://hextaui.com/docs/button-group/examples/vertical.md)
- [Nested groups](https://hextaui.com/docs/button-group/examples/nested.md)
- [With text and an input](https://hextaui.com/docs/button-group/examples/input.md)
- [Disabled and invalid](https://hextaui.com/docs/button-group/examples/disabled.md)
- [Full width](https://hextaui.com/docs/button-group/examples/full-width.md)
- [As a fieldset](https://hextaui.com/docs/button-group/examples/fieldset.md)
- [Right to left](https://hextaui.com/docs/button-group/examples/rtl.md)