Icon Toggle

Not in Production

Icon-only binary on/off control. Optional label + secondToggle covers Figma Icon Toggle + Label (up to 2 toggles).

Preview

Code

Inspect

Appearance

Content

label

iconName *

State

defaultPressed

exclusive

disabled

Accessibility

aria-label

Dual toggle (playground)

dualToggle

Props — IconToggle

Prop	Type	Description
`size`	`"large" \| "medium" \| "small" \| "extraSmall"`	Toggle height. Default medium (40).
`color`	`"primary" \| "secondary" \| "brand" \| "success" \| "error"`	Icon color when pressed.
`iconName`	`FaIconName`	Font Awesome icon for the toggle.
`pressed`	`boolean`	Controlled on/off state (Figma isOn).
`defaultPressed`	`boolean`	Initial pressed state (uncontrolled).
`onPressedChange`	`(pressed: boolean) => void`	Called when pressed state changes.
`label`	`ReactNode`	Optional label beside the toggle (Icon Toggle + Label).
`secondToggle`	`{ iconName; color?; pressed?; defaultPressed?; onPressedChange?; aria-label; disabled? }`	Second toggle for dual layouts (e.g. thumbs up/down).
`exclusive`	`boolean`	With secondToggle: only one toggle can be pressed at a time.
`disabled`	`boolean`	Disables interaction.
`aria-label`	`string`	Accessible name when there is no visible label.