Toggle

A two-state button that can be toggled on or off

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/toggle.json


import { 
  Toggle,   
  ToggleIndicator 
} from "@/components/ui/toggle";


<Toggle>
  <ToggleIndicator />
</Toggle>

Use the pressed and onPressedChange props to control the toggle state programmatically.

❌

Use the disabled prop to disable the toggle.

Use multiple toggles with icons for toolbar-style controls.

Toggle button for on/off or selected state. Use asChild for custom elements.

Prop	Type	Default
`variant`	`outline` \| `ghost`	`ghost`
`size`	`sm` \| `md` \| `lg`	`md`
`pressed`	`boolean`	`-`
`defaultPressed`	`boolean`	`false`
`disabled`	`boolean`	`false`
`onPressedChange`	`(details: PressedChangeDetails) => void`	`-`
`className`	`string`	`-`
`asChild`	`boolean`	`false`

Icon or indicator shown when toggle is active. Omitted when used as child.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

For a complete list of props, see the Ark UI documentation.

On This Page