# Button group: Split button

> Filled buttons sit flush, so add a `<ButtonGroupSeparator />` between them. A dropdown trigger can be any segment.

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

## Add this example

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

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

## Source

```tsx title="components/examples/button-group/split.tsx"
import { IconChevronDown, IconGitBranch } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { ButtonGroup, ButtonGroupSeparator } from "@/components/ui/button-group"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function ButtonGroupSplit() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <ButtonGroup aria-label="Deploy">
        <Button>
          <IconGitBranch data-icon="inline-start" />
          Deploy main
        </Button>
        <ButtonGroupSeparator />
        <DropdownMenu>
          <DropdownMenuTrigger
            render={<Button size="icon" aria-label="Choose branch" />}
          >
            <IconChevronDown />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuGroup>
              <DropdownMenuItem>Deploy staging</DropdownMenuItem>
              <DropdownMenuItem>Deploy preview</DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </ButtonGroup>
      <ButtonGroup aria-label="Delete">
        <Button variant="destructive">Delete</Button>
        <ButtonGroupSeparator />
        <Button variant="destructive" size="icon" aria-label="More">
          <IconChevronDown />
        </Button>
      </ButtonGroup>
    </div>
  )
}
```

## More Button group examples

- [Sizes](https://hextaui.com/docs/button-group/examples/sizes.md)
- [Separators](https://hextaui.com/docs/button-group/examples/player.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)