Pharos
Navegar componentes
← Componentes

AvatarStatusDot

MiscExemplo
Indicador de status em forma de ponto que lê o tamanho do avatar a partir do contexto e escala proporcionalmente. Cada variant combina uma cor com uma forma embutida distinta (preenchido, anel, menos) para que o status nunca seja transmitido apenas pela cor (WCAG 1.4.1).
Importação
import {AvatarStatusDot} from '@pharos-ds/core/AvatarStatusDot';

Exemplos

Área interativa

variant
size
Código
import {AvatarStatusDot, Avatar} from '@pharos-ds/core/Avatar';

<AvatarStatusDot
  label="Online"
  variant="success"
  size="md"
 />

Props

PropTipoPadrãoDescrição
variant'success' | 'neutral' | 'error''success'Variant semântico que combina cor com uma forma distinta: success = ponto verde preenchido, neutral = anel cinza, error = ponto vermelho com barra de menos.
labelstring—Rótulo acessível que descreve o status. Dentro de um Avatar, é composto no nome acessível do avatar (ex.: "Jane Doe, Online") — a raiz do Avatar é role="img", que poda a semântica dos filhos, então o nome composto é como o status chega à tecnologia assistiva. Pontos isolados expõem role="img" com este rótulo diretamente.
iconReactNode—Ícone centralizado dentro do ponto (oculto em tamanhos tiny). Um ícone renderizado substitui o glifo de forma embutido, então use um ícone diferente por status.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/AvatarStatusDot
AvatarStatusDot · Pharos