Component

Toggle

A two-state button that can be either on or off. Perfect for formatting toolbar options, dark mode switches, or item selections.

Preview

State: OFF

Installation

pnpm dlx brutx@latest add toggle

Usage

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

<Toggle aria-label="Toggle bold">
  <Bold className="h-4 w-4 stroke-[3]" />
</Toggle>

Examples

Outline Variant

Use the variant="outline" prop to render outline-bordered toggle controls.

Disabled State

Disabled toggles ignore pointer-events and visually dim.

API Reference

PropTypeDefaultDescription
variant"default" | "outline""default"The visual border styling of the toggle button.
size"default" | "sm" | "lg""default"The size of the toggle button layout.
pressedboolean-Controlled pressed status state of the toggle.
disabledbooleanfalseDisables interaction controls.

Accessibility

Keyboard & Screen Reader Rules:

  • Space / Enter: Triggers and toggles the active selection state.
  • Uses WAI-ARIA aria-pressed to clearly announce active status to screen reader agents.