Toggle
Updated
Toggle is a single on/off button, drawn like one toggle-group segment: muted when off, solid ink when on. It reports its state with aria-pressed. 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 { Toggle } from "@/components/dithercharts/toggle"
<Toggle defaultPressed>Grid</Toggle>
<Toggle pressed={labels} onPressedChange={setLabels}>Labels</Toggle>
<Toggle size="sm">Legend</Toggle>
<Toggle disabled>Locked</Toggle>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 toggle
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| pressed | Type boolean | Default – | Whether it's on, for a controlled toggle; pair it with onPressedChange. |
| defaultPressed | Type boolean | Default false | Whether it starts on, for an uncontrolled toggle. |
| onPressedChange | Type (pressed: boolean) => void | Default – | |
| size | Type "sm" | "md" | Default "md" (40px, or 32px for "sm") | The toggle's height. |