Toggle

Ejemplos

import { BoldIcon } from "lucide-react"
import { Toggle } from "sebs7n-ui/toggle"

function Basico() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle defaultPressed>Activos</Toggle>
      <Toggle>Archivados</Toggle>
      <Toggle disabled>Borradores</Toggle>
      <Toggle aria-label="Negrita">
        <BoldIcon />
      </Toggle>
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Teclado

Espacio · Enter

Alterna.

Accesibilidad

• Emite aria-pressed. Sin texto (solo ícono) necesita aria-label.
• El estado se ve por fondo y por data-pressed, no solo por color.

Reglas de uso

• Si la acción navega o abre algo, es un Button.
• Varios toggles relacionados van en un ToggleGroup.

Relacionados