Skip to Content
ComponentsAtomsLive Indicator

Live Indicator

Atom

Live Indicator mostra estado de atividade em tempo real. Ele precisa ter texto; o ponto sozinho não é suficiente.

Use Live Indicator para sinalizar monitoramento ativo, conexão em andamento ou dado recente. O componente comunica disponibilidade operacional, não severidade de risco.

Exemplos copiáveis

React

import * as React from "react"
 
type LiveStatus = "live" | "connecting" | "offline"
 
const statusLabel: Record<LiveStatus, string> = {
  live: "Ao vivo",
  connecting: "Conectando",
  offline: "Offline",
}
 
export function PulsoLiveIndicator({ status = "live" }: { status?: LiveStatus }) {
  return (
    <span
      data-status={status}
      className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--card)] px-2.5 py-1 text-xs font-medium text-[var(--fg-muted)]"
    >
      <span
        aria-hidden="true"
        className="size-2 rounded-full bg-[var(--fg-muted)] data-[status=live]:bg-[var(--risk-stable-text)] data-[status=connecting]:bg-[var(--risk-attention-text)] data-[status=offline]:bg-[var(--fg-disabled)]"
        data-status={status}
      />
      <span>{statusLabel[status]}</span>
    </span>
  )
}
<PulsoLiveIndicator status="live" />
<PulsoLiveIndicator status="connecting" />
<PulsoLiveIndicator status="offline" />

Estados

  • live: monitoramento ativo e recebendo atualização.
  • connecting: tentativa de conexão ou sincronização em curso.
  • offline: sem atualização em tempo real; use texto de apoio quando isso afeta decisão.

Quando usar

  • Header de painel com stream ativo.
  • Linha de fonte com conexão em tempo real.
  • Estado de sincronização de monitoramento.
  • Confirmação de que uma visão está sendo atualizada automaticamente.

Quando não usar

  • Para indicar risco operacional.
  • Para substituir timestamp de freshness.
  • Para comunicar erro; use Alert ou status explícito.
  • Para decorar títulos estáticos.

Acessibilidade

  • Sempre inclua texto visível junto ao ponto.
  • Não dependa apenas de cor ou pulso.
  • Respeite prefers-reduced-motion.
  • Se o estado mudar automaticamente, avalie se precisa de região aria-live fora do indicador.

Regras

  1. Live não significa confiável; freshness e origem continuam explícitos.
  2. Movimento é sutil e dispensável.
  3. Offline não é risco; é estado de conexão.
  4. Use o mesmo vocabulário em toda a superfície.
  5. Em listas densas, prefira texto curto e ponto estático.
Last updated on
LabelPagination