ToggleButton

A button that stays on or off, for view options such as wrapping lines or showing only your items. Use a Switch for settings that save.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Outline

Ghost, small

Outline

Ghost, small

Outline

Ghost, small

tsx

import { ToggleButton } from '@skribly/ui/actions'

tsx

<ToggleButton isSelected={wrap} onChange={setWrap}>
  <WrapText aria-hidden />
  Wrap lines
</ToggleButton>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

Exposes aria-pressed, so screen readers say "pressed" or "not pressed".
Space or Enter toggles it.
The on state changes fill and border width, never colour alone, and uses the system highlight in forced colours.

This demo runs through axe in all three themes on every test run. See what the tests check.