Arrow System
Ping

Ping ​

Indicador de status contínuo — um dot que pulsa pra sinalizar presença, atividade ou alerta ao vivo. A cor comunica intenção (online, atenção, erro…), não decoração.

Playground ​

Importação ​

ts
import { Ping } from '@arrow/components-vue'

Uso básico ​

vue
<Ping />
<Ping tone="success" />
<Ping tone="error" />

Intenção · tone ​

vue
<Ping tone="neutral" />
<Ping tone="accent" />
<Ping tone="success" />
<Ping tone="warning" />
<Ping tone="error" />

Tamanho · size ​

vue
<Ping size="sm" tone="success" />  <!-- 8px  -->
<Ping size="md" tone="success" />  <!-- 12px -->
<Ping size="lg" tone="success" />  <!-- 16px -->

Pausado · paused ​

Pausa o pulso mantendo o dot central visível — útil pra estados inativos (ex.: offline).

vue
<Ping tone="success" />            <!-- pulsando -->
<Ping tone="neutral" :paused="true" /> <!-- parado -->

Caso de uso · status de presença ​

Ana Silva — online agora
Bruno Costa — ausente
Carlos Dias — offline
vue
<Ping tone="success" size="sm" label="Online" />   <span>Ana — online</span>
<Ping tone="warning" size="sm" label="Ausente" />  <span>Bruno — ausente</span>
<Ping tone="neutral" size="sm" :paused="true" label="Offline" /> <span>Carlos — offline</span>

API ​

Props ​

PropTipoPadrãoDescrição
tone'neutral' | 'accent' | 'success' | 'warning' | 'error''accent'Intenção semântica (decide a cor via token).
size'sm' | 'md' | 'lg''md'Tamanho do dot (8 / 12 / 16px, grade de 4px).
pausedbooleanfalsePausa o pulso; o dot central permanece visível.
labelstring—Rótulo acessível. Sem ele, o indicador é decorativo (aria-hidden).

Acessibilidade ​

  • Com label → role="img" + aria-label; sem → aria-hidden="true" (decorativo).
  • Como a cor sozinha não comunica (daltonismo), em status sempre acompanhe de texto ou use label.
  • Respeita prefers-reduced-motion: pra quem pediu menos movimento, o pulso é desligado automaticamente (só o dot fica).

Migração do MeAnimatePing

Este Ping substitui o antigo MeAnimatePing. O que mudou — e por quê:

  • variant (blue/red/green/orange/gray) → tone (neutral/accent/success/warning/error). Cor é intenção de status (Fund. 01), não decoração.
  • color (hex livre) → removido. Cor literal no componente é proibida.
  • size numérico → sm/md/lg (na grade de 4px). Sem número cru.
  • speed (3 velocidades) → removido. Urgência se comunica pelo tone (error), não pela velocidade.
  • disabled → paused (nome mais claro).
  • Props de margem (m/mt/mb/ml/mr/mx/my) → removidas. Margem é layout do consumidor (wrapper), não do componente.
  • Novo: label para acessibilidade.

Exceção consciente ao Fundamento 06 (Movimento)

O Fund. 06 proíbe loops infinitos e limita durações a 500ms. O Ping é uma exceção deliberada: por ser um indicador de status ao vivo, o movimento contínuo é a informação. Em contrapartida, ele desliga o pulso sob prefers-reduced-motion (exigência de acessibilidade do próprio Fund. 06) e isola a duração própria fora da escala de motion.