Toggle

Formulario

Botão de dois estados (pressionado ou não) sobre o primitivo Radix, base do toggle-group e do segmented control.

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

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

Uso

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

export function Exemplo() {
  return <Toggle />
}

Variantes

Grupo	Valores	Padrão
variant	`defaultoutline`	default
size	`defaultlg`	default

Props

TogglePropsestende React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, VariantProps<typeof toggleVariants>

Quando usar

Use o toggle para um botao que representa um estado ligado/desligado por si so, sem trilha visual de switch: formatacao de texto (negrito, italico, sublinhado), filtros que alternam sozinhos. Ele tambem serve como bloco de construcao de um toggle-group, onde varios Toggle dividem o mesmo grupo e a selecao (unica ou multipla) e coordenada por fora.

Este componente nao existia no Hub legado. Ele nasce direto sobre o Toggle do Radix porque e a base de dois componentes que chegam depois, o toggle-group e o segmented control, e por isso a API ja precisa aguentar composicao.

Quando nao usar

Nao use toggle para ligar/desligar uma preferencia de sistema com efeito imediato fora de uma barra de ferramentas: nesse contexto o Switch comunica melhor a metafora de liga/desliga. Nao use toggle para selecao binaria dentro de um formulario que so aplica ao confirmar: use Checkbox.

Anatomia

Toggle (data-slot="toggle"): unico elemento, o proprio botao. Nao ha partes internas porque o conteudo (icone, texto ou os dois) e passado como filho, igual ao Button.

Variantes

variant: default (fundo transparente) e outline (borda visivel, para toolbars sobre fundos onde o toggle precisa de contorno mesmo sem estar pressionado).
size: default (h-6) e lg (h-8), a mesma escala de altura do Button, para que os dois convivam na mesma barra sem parecer desalinhados.

Acessibilidade

O Toggle usa aria-pressed, nao aria-checked: semanticamente e um botao com estado, nao um controle de selecao. Funciona por teclado: Tab foca, Espaco e Enter alternam (comportamento nativo de <button>, herdado do Radix). Todo Toggle que so mostra um icone precisa de aria-label descrevendo a acao.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="toggle"]

10 tokens usados

bg-surface-secondarybg-transparentborder-inputoutline-nonering-offset-2ring-offset-backgroundring-ringtext-content-secondarytext-foregroundtext-l3