72Empezar
HextaUI

Toggle

Un botón que se mantiene activado o desactivado, con un relleno que se asienta al pulsar, un paso claro de hover a activado e iconos que pueden rellenarse según el estado.

import { IconBold, IconItalic, IconUnderline } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleDemo() {
  return (
    <div className="flex items-center gap-1">
      <Toggle aria-label="Bold" defaultPressed>
        <IconBold />
      </Toggle>
      <Toggle aria-label="Italic">
        <IconItalic />
      </Toggle>
      <Toggle aria-label="Underline">
        <IconUnderline />
      </Toggle>
    </div>
  )
}

Instalación

pnpm dlx shadcn@latest add https://hextaui.com/r/toggle.json

Añade el componente, los tokens del tema de HextaUI y los componentes de HextaUI de los que depende.

Uso

import { Toggle } from "@/components/ui/toggle"
<Toggle aria-label="Bold">
  <IconBold />
</Toggle>

Al pasar el cursor sobre un toggle desactivado se muestra un tinte ligero; al activarlo se asienta un relleno más intenso y la etiqueta alcanza el contraste completo, de modo que activado nunca se parece al hover.

Ejemplos

Contorno

variant="outline" añade un borde y una superficie, para toggles que van por sí solos.

import { IconBookmark } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleOutline() {
  return (
    <div className="flex items-center gap-2">
      <Toggle variant="outline" aria-label="Bookmark">
        <IconBookmark />
      </Toggle>
      <Toggle variant="outline">
        <IconBookmark />
        Bookmark
      </Toggle>
    </div>
  )
}

Con texto

Los iconos y las etiquetas van lado a lado. Los toggles con texto visible no necesitan un aria-label.

import { IconItalic, IconTextWrap } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleText() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle>
        <IconItalic />
        Italic
      </Toggle>
      <Toggle variant="outline" defaultPressed>
        <IconTextWrap />
        Wrap lines
      </Toggle>
      <Toggle variant="outline">Show hidden files</Toggle>
    </div>
  )
}

Relleno al activarse

Añade group-data-pressed/toggle:fill-current a un icono outline y se rellenará cuando el toggle se active.

import { IconBookmark, IconHeart, IconStar } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleFilledIcon() {
  return (
    <div className="flex items-center gap-1">
      <Toggle aria-label="Like" defaultPressed>
        <IconHeart className="group-data-pressed/toggle:fill-current" />
      </Toggle>
      <Toggle aria-label="Star">
        <IconStar className="group-data-pressed/toggle:fill-current" />
      </Toggle>
      <Toggle aria-label="Save">
        <IconBookmark className="group-data-pressed/toggle:fill-current" />
      </Toggle>
    </div>
  )
}

Tamaños

sm, default y lg. Los toggles solo con icono se mantienen cuadrados.

import { IconBold } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleSizes() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Toggle size="sm" aria-label="Bold, small">
          <IconBold />
        </Toggle>
        <Toggle aria-label="Bold">
          <IconBold />
        </Toggle>
        <Toggle size="lg" aria-label="Bold, large">
          <IconBold />
        </Toggle>
      </div>
      <div className="flex items-center gap-2">
        <Toggle size="sm" variant="outline">
          Small
        </Toggle>
        <Toggle variant="outline">Default</Toggle>
        <Toggle size="lg" variant="outline">
          Large
        </Toggle>
      </div>
    </div>
  )
}

Píldora

shape="pill" redondea por completo los extremos, para toggles dentro de superficies redondeadas como el compositor de un chat.

import { IconSparkles, IconWorld } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function TogglePill() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle shape="pill" defaultPressed>
        <IconSparkles />
        Think
      </Toggle>
      <Toggle shape="pill" variant="outline">
        <IconWorld />
        Search
      </Toggle>
    </div>
  )
}

Deshabilitado

Un toggle deshabilitado sigue mostrando si está activado, pero no se puede pulsar ni enfocar.

import { IconBold, IconUnderline } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleDisabled() {
  return (
    <div className="flex items-center gap-2">
      <Toggle disabled aria-label="Bold">
        <IconBold />
      </Toggle>
      <Toggle disabled defaultPressed aria-label="Underline">
        <IconUnderline />
      </Toggle>
      <Toggle disabled variant="outline">
        Read-only mode
      </Toggle>
    </div>
  )
}

Controlado

Pasa pressed y onPressedChange. La etiqueta se mantiene igual mientras el icono sigue el estado.

"use client"

import * as React from "react"
import { IconMicrophone, IconMicrophoneOff } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleControlled() {
  const [muted, setMuted] = React.useState(false)

  return (
    <div className="flex items-center gap-3 text-sm">
      <Toggle
        variant="outline"
        aria-label="Mute microphone"
        pressed={muted}
        onPressedChange={setMuted}
      >
        {muted ? <IconMicrophoneOff /> : <IconMicrophone />}
      </Toggle>
      <span className="text-muted-foreground">
        Microphone is {muted ? "muted" : "on"}
      </span>
    </div>
  )
}

De derecha a izquierda

Los iconos preceden a la etiqueta desde la derecha.

import { IconAlignRight, IconBold, IconItalic } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleRtl() {
  return (
    <div dir="rtl" className="flex items-center gap-2">
      <Toggle variant="outline" defaultPressed>
        <IconBold />
        عريض
      </Toggle>
      <Toggle variant="outline">
        <IconItalic />
        مائل
      </Toggle>
      <Toggle variant="outline" aria-label="محاذاة لليمين">
        <IconAlignRight />
      </Toggle>
    </div>
  )
}

Teclado

KeyAcción
SpaceEnterActiva o desactiva el toggle enfocado.
TabMueve el foco al siguiente toggle.

Accesibilidad

  • El toggle es un button con aria-pressed, así que los lectores de pantalla anuncian si está activado.
  • Dale a los toggles solo con icono un aria-label que nombre la acción ("Silenciar micrófono") y mantenlo igual en ambos estados. Cambiarlo además del estado pulsado se lee como una doble negación.
  • En pantallas táctiles el área de toque crece hasta al menos 44px, salvo dentro de un toggle group, donde los vecinos se solaparían.
  • Con movimiento reducido, nada se escala; el relleno solo se desvanece.

Referencia de la API

Toggle

PropTipoPredeterminado
variant
"default" | "outline""default"
size
"default" | "sm" | "lg""default"
shape
"default" | "pill""default"
pressed
boolean–
defaultPressed
booleanfalse
onPressedChange
(pressed, details) => void–
disabled
booleanfalse
valueIdentifica el toggle dentro de un toggle group.
string–
className
string | (state) => string–
nativeButton
booleantrue
render
ReactElement | (props, state) => ReactElement<button>
AtributoDescripción
data-slot="toggle"El botón, con data-variant y data-size.
data-pressedPresente cuando el toggle está activado.
data-disabledPresente cuando el toggle está deshabilitado.

Relacionado

Usado en bloques

Bloques que se construyen sobre Toggle.