PrimitiveDisponible

Toggle

Botón con estado presionado para una opción de formato reversible.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

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

Uso

Importa el componente en tu proyecto y conserva el código bajo tu 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>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Documenta el valor inicial, seleccionado, deshabilitado y foco. La selección cambia el indicador o la posición, además del color.
Usa Espacio para activar botones de selección; las flechas cambian radios y sliders. Checkbox admite un estado mixto.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
pressed	boolean	uncontrolled	Controlled pressed state.
onPressedChange	function	—	Reports changes.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.