On this page
Props
<ToggleButton aria-label="Toggle pin">
<PinIcon data-icon-start="" className="rotate-45" />
Pin
</ToggleButton>Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/toggle-buttonUsage
Use toggle buttons to allow users to toggle a selection on or off, like pinning or starring an item.
import { PinIcon } from 'lucide-react'
import { ToggleButton } from '@/components/ui/toggle-button'<ToggleButton>
<PinIcon data-icon-start="" />
Pin
</ToggleButton>Examples
Default
Variants
With Text
Sizes
Shapes
Disabled
Uncontrolled
Controlled
state: on
API Reference
A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
| Prop | Type | Default | |
|---|---|---|---|
"default" | "primary" | "quiet" | 'default' | ||
union | 'md' | ||
boolean | — | ||
ReactNode | function | — | ||
boolean | — | ||
Key | — | ||
boolean | — | ||
boolean | — | ||
function | — | ||
Last updated on 6/16/2026