Toggle

A two-state button that can be either on or off.

Installation

terminal

npx felicityui add toggle --platform react

Usage

example.tsx

import { Bookmark } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"

<Toggle aria-label="Toggle bookmark" variant="outline">
  <Bookmark data-icon="inline-start" data-icon-fill />
</Toggle>

Default

Outline

variant="outline"

With text

Size

sm | default | lg

Disabled

RTL

dir=rtl

API Reference

Prop	Type	Default	Description
pressed	boolean	—	Controlled pressed state.
defaultPressed	boolean	false	Uncontrolled initial pressed state.
onPressedChange	(pressed: boolean) => void	—	Called when the pressed state changes.
variant	default \| outline	default	Visual style.
size	default \| sm \| lg	default	Control size.
disabled	boolean	—	Disables the toggle.
className	string	—	Additional classes.
toggleVariants	({ variant?, size?, className? }) => string	—	Exported class helper.

Accessibility

WCAG 2.2 AA

Exposes aria-pressed for assistive tech.
Keyboard operable as a native button.
Visible focus-visible ring.
Disabled state is not focusable for activation.

Platform notes

React

Native HTML button with Felicity semantic tokens. Paper/ink surfaces, hairline borders — not Base UI / Radix runtime.

Client component (pressed state).
Uses data-slot and data-state=on|off.
aria-pressed reflects pressed state.
Icons use data-icon=inline-start|inline-end for placement.