An icon button for a binary action state. Toggle changes both its icon and emphasis while preserving one stable accessible label.
| Prop | Type | Required | Description |
|---|---|---|---|
| label | string | Yes | Stable accessible name for the action |
| value | boolean | Yes | Whether the toggle is on |
| onValueChange | (value: boolean) => void | Yes | Called with the next state |
| onIcon | IconType | Yes | Icon displayed when on |
| offIcon | IconType | Yes | Icon displayed when off |
| bare | boolean | No | Removes the button surface |
| disabled | boolean | No | Disables interaction |
| jss | JSS | No | Exceptional style overrides |
const [notifications, setNotifications] = useState(false);
<Toggle
label="Notifications"
value={notifications}
onValueChange={setNotifications}
onIcon="bell-ring"
offIcon="bell-off"
/>;
Use bare when the toggle sits in application chrome or another surface that already communicates its boundary. Bare toggles remain accent-neutral in both states; the icon and aria-pressed communicate the state without introducing a blue action color.
<Toggle
bare
label="Dark mode"
value={darkMode}
onValueChange={setDarkMode}
onIcon="sun"
offIcon="moon"
/>
Toggle renders a native button with aria-pressed. Keep label stable between states; assistive technology announces the pressed state separately.