PrimitiveAvailable

Toggle

A pressed-state button for a reversible formatting choice.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/toggle.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import { Toggle } from '@/components/ui/toggle';
import { TextBIcon as Bold } from "@phosphor-icons/react";

export default function Demo() {
  return (
    <Toggle aria-label="Bold text">
      <Bold weight="bold" aria-hidden="true" />
      <span>Bold</span>
    </Toggle>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Document initial, selected, disabled and focus states. Selection changes an indicator or position as well as color.
Use Space for selection controls; arrow keys change radios and sliders. Checkbox supports a mixed state.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
pressed	boolean	uncontrolled	Controlled pressed state.
onPressedChange	function	—	Reports changes.

Accessibility

Rules that should remain intact when adapting the component to a product.

Give toggle buttons a stable name and preserve aria-pressed.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.