z-uiDesign system
Componentes · shadcn

Toggle

Botão de dois estados. O estado ligado fica em data-state=on e aria-pressed.

Variantes

Tamanhos, só ícone e desabilitado

Props

PropTipoPadrãoDescrição
pressed / defaultPressedboolean—Estado ligado, controlado ou inicial.
onPressedChange(pressed: boolean) => void—Chamado a cada troca.
variant"default" | "outline""default"Sem borda ou com borda.
size"sm" | "md" | "lg""md"Altura h-form-sm, h-form-md ou h-form-lg. Só ícone fica quadrado.
disabledbooleanfalseBloqueia a troca.
<Toggle variant="outline" aria-label="Lembretes"><Bell /></Toggle>