Componentes
Logo
betaA marca sobre o gradiente navy–purple–teal. Um dos poucos lugares onde as três cores aparecem juntas.
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/logo
Playground
VoxMente
<Logo />Uso
A marca da Vox Mente. A mancha usa `--vox-gradient` (navy → purple → teal, interpolado em OKLCH) — um dos poucos lugares do sistema onde as três cores de marca aparecem juntas.
VoxMente
Tamanhos
`sm` para dentro de uma barra estreita, `lg` para tela de login ou splash. O wordmark acompanha a escala de `text-section` no tamanho grande.
VoxMente
VoxMente
VoxMente
Só a marca
`wordmark={false}` oculta o texto e mantém só a mancha — para sidebars recolhidas, onde não há espaço para o nome por extenso. O rótulo continua acessível via `aria-label`.
Rótulo customizado
`label` troca o texto do wordmark — e, quando `wordmark` está desligado, vira o `aria-label` da mancha. Use para uma variação de marca dentro de um produto específico, não para traduzir o nome.
Vox Mente Escolas
Referência da API
Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.
Logo
| Prop | Tipo | Padrão |
|---|---|---|
| label | string | "VoxMente" |
| size | "md" | "sm" | "lg" | null | "md" |
| wordmark Oculta o texto e mantém só a marca — para sidebars recolhidas. | boolean | true |
Também aceita as props de 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