Componentes
Toggle
betaUm estado binário que fica visível no próprio controle — negrito ligado, filtro ativo.
Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
@voxmente/ui/components/ui/toggle
Playground
<Toggle>
<Star />
</Toggle>Uso
Um botão com dois estados, ligado ou desligado, que fica visível nele mesmo. Não é uma ação — é um estado que persiste.
Variantes
`outline` marca a borda mesmo desligado. Use quando o toggle aparece isolado, sem outros controles ao lado para dar contexto.
Tamanhos
Três tamanhos, mesma proporção do Button e do Badge.
Com texto
Aceita texto e ícone juntos. O espaçamento vem do próprio componente, sem margem manual.
Pressionado por padrão
`defaultPressed` define o estado inicial na forma não controlada. Em produção, sincronize com o dado da lição ou da sessão.
Desabilitado
Some o ponteiro e baixa a opacidade, mas mantém o estado visível — quem olha ainda vê se está ligado ou desligado.
Referência da API
Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.
Toggle
| Prop | Tipo | Padrão |
|---|---|---|
| size | "md" | "sm" | "lg" | null | "md" |
| variant | "default" | "outline" | null | "default" |
Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.
Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.
Origem do dado
- Demonstrações e playground: componente real de @voxmente/ui
- Referência da API: TypeScript do pacote
- Cor, espaçamento e raio das demonstrações: tokens de theme.css