Pharos
Navegar componentes
← Componentes

StatusDot

MiscExemplo
Um pequeno ponto colorido que comunica status como presença online/offline ou níveis de severidade. Suporta cinco variantes semânticas e animação pulse opcional. Sempre combine com um label de texto visível, pois cor sozinha não deve carregar significado.
Importação
import {StatusDot} from '@pharos-ds/core/StatusDot';

Exemplos

Área interativa

variant
isPulsing
Código
import {StatusDot} from '@pharos-ds/core/StatusDot';

<StatusDot
  label="Online"
  variant="success"
  isPulsing={false}
 />

Boas práticas

  • Faça: Sempre combine com um label de texto visível para que o status não seja comunicado apenas por cor.
  • Faça: Forneça uma prop `label` descritiva para acessibilidade com screen readers.
  • Evite: Use a animação pulse para fins puramente decorativos; reserve para estados que exigem atenção imediata.
  • Evite: Confie apenas na cor para comunicar status; sempre inclua texto.

Props

PropTipoPadrãoDescrição
variant *'success' | 'warning' | 'error' | 'accent' | 'neutral'—Variante de cor semântica.
label *string—Label acessível exposto via aria-label.
isPulsingbooleanfalseHabilita animação pulse; respeita prefers-reduced-motion: reduce.
tooltipstring—Texto de tooltip exibido no hover para explicar o significado do status.
xstyleStyleXStyles—Estilos StyleX para customização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(), não um objeto de estilo inline como style={{}}.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/StatusDot
StatusDot · Pharos