Button Group

Installation

npx shadcn@latest add @uqudo/button-group

Installing it also installs Separator, which ButtonGroupSeparator is built on. The examples below use Button, which you install separately.

Usage

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

<ButtonGroup>
  <Button variant="outline">Day</Button>
  <Button variant="outline">Week</Button>
  <Button variant="outline">Month</Button>
</ButtonGroup>

The group removes the inner corner radii and collapses the shared borders so the children read as one control. It also knows about inputs, input groups and select triggers, so you can mix those in with buttons.

Examples

Orientation

Stack the buttons with orientation="vertical".

With text

ButtonGroupText is a non-interactive segment for a prefix, unit or label. ButtonGroupSeparator draws a hairline between two siblings.

API Reference

ButtonGroup

A div with role="group".

ButtonGroupText

A muted, bordered segment sized like a button. Icons inside are sized automatically.

ButtonGroupSeparator

A Separator that stretches to the height of the group.

buttonGroupVariants

The class-variance-authority recipe behind ButtonGroup. Call it when you need the grouping styles on an element you are not rendering through <ButtonGroup>.

import { buttonGroupVariants } from "@/components/uqudo/ui/button-group"

<fieldset className={buttonGroupVariants({ orientation: "vertical" })}>
  ...
</fieldset>

Data attributes