dotUI

Toggle Button

A toggle button allows a user to toggle a selection on or off.

<ToggleButton aria-label="Toggle pin">
  <PinIcon className="rotate-45" />
</ToggleButton>

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/toggle-button

Use 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.

variant

size

isDisabled

<ToggleButton aria-label="Toggle pin" variant="default" size="md">
  <Pin className="rotate-45" />
</ToggleButton>

A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.