Toggle

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

$bunx shadcn@latest add @nx-ui/toggle
Registry item
Installs withutils

Basic

An uncontrolled toggle. Pass `defaultPressed` to start it on.

Variants

Default is borderless; outline adds a border.

Sizes

Small, default and large, icon-only.

Disabled

Disabled toggles dim and stop responding to clicks, in either pressed state.

Composition: movements board view switcher

Controlled toggles used as a two-way view switcher for the waste movements board, plus a watchlist star for the active site.

Cranbourne Organics14 movements in transit today

Showing a sortable list of haulage movements to and from Cranbourne Organics.

API reference

Exported parts and their props, extracted from the component source.

PropTypeDefaultDescription
variant"default" | "outline""default"
size"default" | "sm" | "lg""default"

…extends TogglePrimitive.Props