<ToggleButton aria-label="Toggle pin">
<PinIcon className="rotate-45" />
</ToggleButton>pnpm dlx shadcn@latest add @dotui/toggle-buttonUse toggle buttons to allow users to toggle a selection on or off, like pinning or starring an item.
import { ToggleButton } from "@/components/ui/toggle-button";<ToggleButton aria-label="Toggle pin">
<PinIcon />
</ToggleButton>Use the controls below to experiment with different toggle button props and see the live preview and code update.
The visual style of the toggle button.
"default" | "quiet"The size of the toggle button.
"sm" | "md" | "lg"A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
| Prop | Type | Default | |
|---|---|---|---|
| | ||
| | ||
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(ToggleButton) aria-label="Toggle pin" variant="default" size="md">
<Pin className="rotate-45" />
</Dynamic(ToggleButton)>