Toggle
Botão que fica pressionado ou não (ex.: negrito, filtro ativo).
Playground
Variante
Tamanho
<Toggle aria-label="Negrito"> <Bold /> </Toggle>
Quando usar
- ✓Estado liga/desliga dentro de uma barra de ferramentas ou filtro
Evite quando
- Configuração persistente→ Switch
- Escolher uma entre várias opções→ ToggleGroup ou Tabs
Variantes e props
variantpadrão: defaultdefaultoutline
sizepadrão: defaultdefaultsmlg
Estados
pressedhoverfocus-visibledisabled
Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).
Acessibilidade
- Papel
- button com aria-pressed
- Teclado
- Enter/Espaço
- Só ícone → aria-label
Código
import
import { Toggle } from "@/components/ui/toggle";Fonte: src/components/ui/toggle.tsx · Resense (shadcn base-nova, Base UI)
Relacionados: ToggleGroup, Switch, Button