Button Group

Installation

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

Usage

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

<ButtonGroup> 
  <Button />
  <ButtonGroupSeparator />
  <Button />
  <ButtonGroupSeparator />
  <ButtonGroupText />
</ButtonGroup>

Accessibility

• The ButtonGroup component has the role attribute set to group.
• Use Tab to navigate between the controls in the group.
• Use aria-label or aria-labelledby to label the group.

<Group aria-label="Media controls">
  <Button variant="outline">Play</Button>
  <GroupSeparator />
  <Button variant="outline">Pause</Button>
</Group>

Orientation

You can change the orientation of the button group using the orientation prop.

Horizontal

Vertical

Examples

Nested

You can nest button groups inside other button groups to have spacing between the buttons

Separator

You can add a separator between the buttons using the <ButtonGroupSeparator />.

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.

With Text

You can add text between the buttons using the <ButtonGroupText />.

With Input

You can combine buttons with input fields in a button group.

With Menu

You can integrate a menu component within a button group for additional options.

With Popover

You can add a popover trigger button to a button group for contextual information or actions.

API Reference

ButtonGroup

Root element of the button group. Renders a fieldset

ButtonGroupText

Text element for the button group. Renders a div

ButtonGroupSeparator

Separator element for the button group. Renders a <Separator />.