Toggle

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

Import

tsx

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

Playground

Interactively configure the Toggle props below.

Icon Pair

Disabled

tsx

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

Default

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

tsx

import { Sun, Moon } from '@tac-ui/icon-native';

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

Media Controls

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

tsx

import { Volume2, VolumeX, Mic, MicOff, Pause, Play } from '@tac-ui/icon-native';

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

Visibility & Security

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

tsx

import { Eye, EyeOff, Unlock, Lock, Wifi, WifiOff } from '@tac-ui/icon-native';

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

Social & Actions

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

tsx

import { Heart, HeartOff, Bookmark, BookmarkX, Star, StarOff, ThumbsUp, ThumbsDown } from '@tac-ui/icon-native';

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

Notifications & Pinning

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

tsx

import { Bell, BellOff, Pin, PinOff } from '@tac-ui/icon-native';

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

API Reference

Prop	Type	Default	Description
checked	boolean	false	The controlled checked state.
onChange	(checked: boolean) => void	-	Callback fired when the toggle is pressed, 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.
style	ViewStyle	-	Additional styles applied to the pressable container.