Toggle

A two-state button that switches between on and off. Built on Radix UI Toggle — handles pressed state, ARIA, and keyboard interaction automatically.

Built on Radix UI.

✓Two variants: default (ghost-style) and outline (bordered)
✓Three sizes: sm, default, lg
✓Controlled and uncontrolled modes via pressed / defaultPressed
✓Built-in ARIA pressed state — screen readers announce on/off
✓First-class Lucide icon support — icons auto-sized to 16px
✓Forwards ref to the underlying element

import { Toggle }from "@aetherstack/ui"

toggle.tsx

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

export function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <Bold />
    </Toggle>
  )
}

Usage

Default

The default ghost-style toggle. Background fills on hover; accent fill when pressed.

Outline variant

A bordered toggle for use in toolbars where visual separation is needed.

Sizes

Three sizes — sm, default, and lg — to match surrounding UI density.

Disabled

Disabled toggles are non-interactive and visually dimmed.

Props

Prop	Type	Default	Description
variant	"default" \| "outline"	"default"	Visual style. Default is ghost-style; outline adds a border.
size	"default" \| "sm" \| "lg"	"default"	Controls padding and height.
pressed	boolean	—	Controlled pressed state. Use with onPressedChange.
defaultPressed	boolean	false	Uncontrolled initial pressed state.
onPressedChange	(pressed: boolean) => void	—	Callback fired when the pressed state changes.
disabled	boolean	false	Prevents interaction and applies reduced opacity.
className	string	—	Additional class names merged onto the toggle element.

* Required props

Accessibility

→Has role='button' with aria-pressed — screen readers announce the current on/off state.
→Always provide aria-label when the toggle contains only an icon.
→Keyboard accessible — toggle with Enter or Space.
→Focus ring is always visible on keyboard navigation (focus-visible).
→Disabled state has aria-disabled='true' and prevents all pointer events.