Command Menu

Search documentation, components, and switch theme.

Atoms

Button Group

A group of buttons with separator.

Formance
Docs

Installation#

npx shadcn@latest add @formance/button-group

Install the following dependencies:

npm install class-variance-authority radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator } from '@/components/ui/button-group'
<ButtonGroup orientation="horizontal">
  <Button variant="outline">Ledgers</Button>
  <Button variant="outline">Payments</Button>
  <Button variant="outline">Wallets</Button>
</ButtonGroup>

Compound Components

Compose the pieces you need:

<ButtonGroup />Root container with horizontal or vertical orientation.
<ButtonGroupText />Muted text segment between buttons.
<ButtonGroupSeparator />Visual separator between grouped buttons.