Toggle

A button that stays pressed: Bold, Pin, Mute.

$ pnpm dlx shadcn@latest add https://dashral.com/r/toggle.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/toggle.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/toggle

Usage

example.tsx

1import { Pin } from "lucide-react"
2import { Toggle } from "@/components/dashral/toggle"
3
4<Toggle aria-label="Pin" pressed={pinned} onPressedChange={setPinned}>
5  <Pin />
6</Toggle>

Examples

Outline and sizes

variant="outline" has a border all the time; sm, default and lg.

API reference

Toggle

Also takes every prop of Radix Toggle(opens in a new tab).

Prop	Type	Default
`pressed / defaultPressed / onPressedChange`	`boolean` Controlled or initial state.	—
`variant`	`"ghost" \| "outline"` Quiet until it's on, or a border all the time.	`"ghost"`
`size`	`"sm" \| "default" \| "lg"` 32, 36 or 40px tall.	`"default"`
`color`	`"primary" \| "neutral" \| "none"` The tint when it's on: a soft primary, neutral grey for a busy toolbar, or none when what's inside shows it (a reaction's filled icon).	`"primary"`
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Enter`or`Space`	Turn it on or off

Accessibility

A button with aria-pressed. An icon alone needs an aria-label.