Dashral Pro is hereSee pricing

Dashral

Button GroupNew

Buttons that belong together, joined into one control.

$ pnpm dlx shadcn@latest add @dashral/button-group

Installation

$ pnpm dlx shadcn@latest add @dashral/button-group

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/button-group.json

Usage

example.tsx
import { Button } from "@/components/dashral/button"
import { ButtonGroup } from "@/components/dashral/button-group"

<ButtonGroup aria-label="Range">
  <Button variant="outline">Day</Button>
  <Button variant="outline">Week</Button>
  <Button variant="outline">Month</Button>
</ButtonGroup>

Using the npm package? Import from @dashral/ui/components/button-group instead, here and in the examples; the rest is the same.

Examples

Split button

The main action, and a Dropdown Menu of the others on a joined icon button.

Editor toolbar

Groups of icon buttons with tooltips, and a stacked zoom control with orientation="vertical".

API reference

ButtonGroup

Also takes every prop of <div>(opens in a new tab).

PropTypeDefault
orientation"horizontal" | "vertical"

Side by side or one above the other.

"horizontal"
attachedboolean

Joined into one control, or apart with a small gap (still one group).

true
aria-labelstring

Names the group: "Text alignment".

—
classNamestring

Extra classes, merged with cn() so yours win.

—

Accessibility

  • role="group", named by aria-label. Each button keeps its own name; an icon button needs an aria-label.
  • For one choice that stays picked, use Segmented Control or Toggle Group: they say which one is on.