Toggle

A stable button that expresses an on/off choice with aria-pressed.

Interactive preview

Live specimenTry the component

Bold is off.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add toggle

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Toggle pressed={bold} onPressedChange={setBold} aria-label="Bold">
  <BoldIcon aria-hidden="true" />
</Toggle>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`pressed / defaultPressed`	`boolean`	`false`
`onPressedChange`	`(pressed: boolean) => void`	`—`
`variant`	`default \| outline`	`default`
`size`	`sm \| md \| lg`	`md`
`disabled`	`boolean`	`false`

Accessibility

Use a stable label such as Bold rather than changing it to Unbold. Native Enter/Space toggles pressed state; disabled prevents activation. The default type is button and the control does not represent a submitted form field. Use Checkbox, RadioGroup, or Switch for named form values/settings. onClick can preventDefault to cancel the state change. Refs target the native button; controlled state remains consumer-owned.