Componentes
Wordmark
Imagotipo oficial: coruja + "hibou" + "pay". "pay" é sempre Vivid Blue; "hibou" é preto no claro e branco no escuro.
estávelMarcadesde 0.1.0@hiboupay/icons
Exemplos#
Sobre claro
Sobre escuro
Importar#
tsx
import { Wordmark } from "@hiboupay/icons";
import type { WordmarkProps } from "@hiboupay/icons";Quando usar#
Use quando
- Topo da navegação.
- Login, e-mail, documento.
Não use quando
- Espaço menor que 96px de largura: HibouMark.
Variantes#
onLight
"hibou" preto.
onDark
"hibou" branco.
Anatomia#
- 01Coruja em degradê
- 02"hibou" em tinta
- 03"pay" em Vivid Blue
Estados#
estático
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| onDark | boolean | false | Fundo escuro. |
| title | string | "HibouPay" | Nome acessível. |
| className | string | Altura (h-*); largura segue a proporção. |
Acessibilidade#
Teclado
—Se for link, o link recebe o foco.
Leitor de tela
- —role=img com aria-label "HibouPay".
Boas práticas#
Faça
- Respiro mínimo da altura da coruja em volta.
Evite
- Trocar a cor de "pay".
- Aplicar sobre foto sem scrim.
Conteúdo#
- ——
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.