Button Group

Group button elements together.

Installation


pnpm dlx shadcn@latest add @shark/button-group


ButtonGroup
└── Button or Input
├── ButtonGroupText
└── ButtonGroupSeparator


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


<ButtonGroup> 
  <Button>
    Archive 
  </Button>
  <ButtonGroupSeparator />
  <Button>
    Report
  </Button>
</ButtonGroup>


<ButtonGroup aria-label="Media controls">
  <Button>Play</Button>
  <Button>Pause</Button>
</ButtonGroup>

Buttons with variant outline do not need a separator since they have a border.

A popover trigger button can be added to a button group for contextual information or actions.

Groups buttons together. Uses fieldset for accessibility when applicable.

Visual divider between buttons. Uses Separator internally.

On This Page