Toggle Button

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

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

Installation

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 { PinIcon } from "lucide-react";
import { ToggleButton } from "@/components/ui/toggle-button";

<ToggleButton>
	<PinIcon data-icon-start="" />
	Pin
</ToggleButton>

Use the controls below to experiment with different toggle button props and see the live preview and code update.

children

variant

size

isIconOnly

isDisabled

<ToggleButton>
  <Pin data-icon-start="" className="rotate-45" />
  Pin
</ToggleButton>

state: on

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`	`—`
	`DOMRenderFunction<"button", ToggleButtonRenderProps>`	`—`

	`function`	`—`

Last updated on 5/22/2026