Toggle

A two-state button. Icons pop slightly when pressed on.

Playground

Tweak the props, the preview and the code follow.

Props

variant

size

content

disabled

<Toggle variant="outline">
  <Star /> Star
</Toggle>

npx @plumsydev/plum-ui add toggle

import { Toggle } from "@/components/ui/toggle"

<Toggle aria-label="Bold"><Bold /></Toggle>

Controlled toggles with custom pressed colors.

Extends Radix Toggle.Root.

Prop	Type	Default
`variant` Visual style.	`"default" \| "outline"`	`"default"`
`size` Size.	`"sm" \| "default" \| "lg"`	`"default"`
`pressed / defaultPressed` Controlled or initial state.	`boolean`	`—`
`onPressedChange` Called when toggled.	`(pressed: boolean) => void`	`—`