Toggle

An animated toggle button that switches between two states with a visual transition.

Import

tsx

import { Toggle } from '@tac-ui/web';

Playground

Interactively configure the Toggle props below.

Icon Pair

Disabled

tsx

<Toggle iconOn={<Sun />} iconOff={<Moon />} />

Default

Pass iconOn and iconOff to define the icon for each state. The button fires onChange with the new boolean value on each click.

tsx

<Toggle
  checked={checked}
  onChange={setChecked}
  iconOn={<Sun />}
  iconOff={<Moon />}
/>

Media Controls

Toggle works with any pair of icons — ideal for mute, mic, and play/pause controls.

tsx

<Toggle iconOn={<Volume2 />} iconOff={<VolumeX />} />
<Toggle iconOn={<Mic />} iconOff={<MicOff />} />
<Toggle iconOn={<Pause />} iconOff={<Play />} />

Visibility & Security

Use complementary icon pairs to represent binary visibility or security states.

tsx

<Toggle iconOn={<Eye />} iconOff={<EyeOff />} />
<Toggle iconOn={<Unlock />} iconOff={<Lock />} />
<Toggle iconOn={<Wifi />} iconOff={<WifiOff />} />

Social & Actions

Social reaction states animate between the active and inactive icon with a spring rotation transition.

tsx

<Toggle iconOn={<Heart />} iconOff={<HeartOff />} />
<Toggle iconOn={<Bookmark />} iconOff={<BookmarkX />} />
<Toggle iconOn={<Star />} iconOff={<StarOff />} />
<Toggle iconOn={<ThumbsUp />} iconOff={<ThumbsDown />} />

Notifications & Pinning

Bell and pin pairs are common toolbar toggles for notification and pin-to-top features.

tsx

<Toggle iconOn={<Bell />} iconOff={<BellOff />} />
<Toggle iconOn={<Pin />} iconOff={<PinOff />} />

Custom Size

Override the button dimensions and icon size via className to scale the toggle to any size needed.

tsx

<Toggle
  iconOn={<Heart />}
  iconOff={<HeartOff />}
  className="w-12 h-12 [&_svg]:w-6 [&_svg]:h-6"
/>

API Reference

Prop	Type	Default	Description
checked	boolean	false	The controlled checked state.
onChange	(checked: boolean) => void	-	Callback fired when the toggle is clicked, receives the new boolean value.
iconOn	React.ReactNode	-	Icon rendered when checked is true.
iconOff	React.ReactNode	-	Icon rendered when checked is false.
disabled	boolean	false	Disables the button, blocking all interactions.
className	string	-	Additional CSS class names for sizing or styling overrides.