Componentes
Avatar
Iniciais em Sora sobre uma cor de token: Vivid Blue, Graffiti, success-ink, warning-ink ou danger-ink. A cor vem do e-mail, então a mesma pessoa tem sempre a mesma cor. Ninguém atribuído é tracejado.
betaDadosdesde 0.1.0@hiboupay/react
Exemplos#
ALRSCNDP?
Tamanhos · cor estável por e-mail · ninguém atribuído
Importar#
tsx
import { Avatar, AvatarPlaceholder, avatarPalette, avatarHue, initials } from "@hiboupay/react";
import type { AvatarProps, AvatarPlaceholderProps, AvatarSize } from "@hiboupay/react";Quando usar#
Use quando
- Pessoa responsável em lista, cartão, conta.
Não use quando
- Empresa ou marca: use logo.
Variantes#
xs · 20
Tabela densa.
sm · 24
Padrão em lista.
md · 32
Menu de conta.
lg · 40
Perfil.
Anatomia#
- 01Círculo na cor do token
- 02Iniciais Sora
- 03Brilho interno
Estados#
com pessoaAvatarPlaceholder (ninguém)
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| name | string | null | Nome para as iniciais. | |
string | null | Chave da cor; fallback das iniciais. | ||
| size | "xs" | "sm" | "md" | "lg" | "sm" | 20 · 24 · 32 · 40. |
| title | string | Tooltip; padrão é o nome ou e-mail. | |
| AvatarPlaceholder.title | string | "Ninguém atribuído" | Explica a ausência. |
Acessibilidade#
Teclado
—Não é interativo.
Leitor de tela
- —Avatar expõe o nome por title; ponha o nome em texto ao lado quando for essencial.
- —AvatarPlaceholder é role=img com aria-label.
Boas práticas#
Faça
- Mesmo tamanho numa lista.
Evite
- Inventar pessoa quando não há.
- Cor manual.
Conteúdo#
- —title do placeholder diz o que fazer: "Sem responsável — atribua alguém".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.