Toggle

Two-state button that can be toggled on or off.

Installation


pnpm dlx shadcn@latest add @shark/toggle


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