Toggle
A button that stays on or off, such as Bold in a text toolbar.JSX
<Toggle>Italic</Toggle>
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Toggle } from '@advui/core'
import { BoldIcon } from '@advui/icons'
<Toggle aria-label="Bold" icon={<BoldIcon />} />
<Toggle pressed={muted} onPressedChange={setMuted}>Mute</Toggle>Examples
Icon, text and disabled
Preview
Code
Controlled
The label stays the same; the state is announced as pressed.Preview
Code
Not saved yet.
API reference
Toggle
| Prop | Type | Default | Description |
|---|---|---|---|
pressed | boolean | — | On or off, when you control it. |
defaultPressed | boolean | false | Starting `pressed` when uncontrolled. |
onPressedChange | (pressed: boolean) => void | — | Called when the user turns it on or off. |
variant | 'default' | 'outline' | 'default' | Transparent, or with a border. |
size | 'sm' | 'md' | 'lg' | 'md' | Height. |
icon | ReactNode | — | Icon before the label. |
disabled | boolean | false | Not interactive. |
aria-label | string | — | Required for icon-only toggles. Keep it the same in both states. |
Accessibility
- On web it is a
<button>witharia-pressed; on iOS and Android a toggle button whose state is read as on or off. - Keep the label the same in both states: the pressed state already says whether it is on. Use Switch for settings that apply at once.
- The on state changes the background color, not only a small detail, so it is easy to see.
- Touch targets are at least 44pt on native.
| Key | Action |
|---|---|
| Space / Enter | Turns the toggle on or off. |
Platform notes
Web
A native
<button type="button">.iOS
VoiceOver reads “toggle button”, then on or off.
Android
TalkBack reads “toggle button”, then on or off. With
androidRipple (on in material()), presses show the native ripple.