IconSwitch

A two-state sliding switch that shows a distinct icon in each of its "off" and "on" positions. Vajra UI ships no bundled icons: offIcon/onIcon accept any component matching TVajraIconComponent. The examples below use @devraj-labs/vajra-ui-icons, a small set of Lucide icons pre-adapted to that contract.

Basic usage

function ThemeSwitch() {
  const [value, setValue] = useState(false);
  return <IconSwitch value={value} onChange={setValue} offIcon={SunIcon} onIcon={MoonIcon} />;
}

Disabled

<IconSwitch value={false} onChange={() => {}} offIcon={SunIcon} onIcon={MoonIcon} isDisabled />

Custom sizing & colors

<IconSwitch
  value={true}
  onChange={() => {}}
  offIcon={SunIcon}
  onIcon={MoonIcon}
  cellSize={32}
  iconSize={14}
  activeIconColor="primary"
  inactiveIconColor="textMuted"
/>

Props

Prop	Type	Default	Description
value	boolean		Required. Current state; false selects the off cell, true selects the on cell.
onChange	(value: boolean) => void		Required. Called with the toggled value on press.
offIcon	TVajraIconComponent		Required. Icon rendered in the off (left) cell.
onIcon	TVajraIconComponent		Required. Icon rendered in the on (right) cell.
trackBg	TVajraColors	'surfaceRaised'	Background color of the track.
trackRounded	TRoundedToken	'r-3'	Corner radius of the track.
selectorBg	TVajraColors	'surface'	Background color of the sliding selector box.
selectorRounded	TRoundedToken	'r-2'	Corner radius of the sliding selector box.
activeIconColor	TVajraColors	'text'	Color of whichever icon is currently active.
inactiveIconColor	TVajraColors	'textMuted'	Color of whichever icon is currently inactive.
isDisabled	boolean	false	Disables interaction and dims opacity.
cellSize	number	40	Size of each icon cell (and the selector box).
iconSize	number	18	Size passed to both icons.
testID	string		Test identifier forwarded to the root pressable.