Toggle Button

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

<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-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 defaultSelected for uncontrolled state, or isSelected with onChange to control it. The value is a boolean.

<ToggleButton defaultSelected>Pin</ToggleButton>

<ToggleButton isSelected={isSelected} onChange={setSelected}>
  Pin
</ToggleButton>

Wireless Headphones

$129.00

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

Last updated on 7/7/2026