Button group

ButtonGroup joins buttons and toggles into one row or column. They share their ink borders and sit on a single dithered shadow, and the group names them for screen readers. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { Button } from "@/components/dithercharts/button"
import { ButtonGroup } from "@/components/dithercharts/button-group"

<ButtonGroup label="Zoom">
  <Button variant="outline">−</Button>
  <Button variant="outline">Fit</Button>
  <Button variant="outline">+</Button>
</ButtonGroup>
<ButtonGroup label="Export" orientation="vertical">
  <Button>CSV</Button>
  <Button>PNG</Button>
</ButtonGroup>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add button-group

Props

It renders a native element, so every other attribute that element takes passes through.