Recipedata-display

Status

Stable

Recipe do Badge oficial que diz se um serviço está no ar: um ponto colorido, com um anel que pulsa, e a palavra do estado — online, offline, em manutenção ou instável. Preserva a API do Kibo (`status` na raiz, indicador e rótulo como partes) e tudo o que o Badge é, `variant` e `render` incluídos. As cores são tokens: `destructive` do contrato base, e `--success`, `--warning` e `--info` lidos com a cor original do upstream como fallback.

Instalação

npx up-web-ds add status

Preview

Basic

OnlineOfflineMaintenanceDegraded

Translated

OperacionalFora do arEm manutençãoInstável

With Detail

API · 99,98% nos últimos 30 dias

Variants

OutlineGhost

All states

Basic

OnlineOfflineMaintenanceDegraded

Translated

OperacionalFora do arEm manutençãoInstável

With Detail

API · 99,98% nos últimos 30 dias

Variants

OutlineGhost

Usage

@/components/ui/status
import {
  Status,
  StatusIndicator,
  StatusLabel,
} from '@/components/ui/status'
Status
<div className="flex flex-wrap items-center gap-3">
  <Status status="online">
    <StatusIndicator />
    <StatusLabel />
  </Status>
  <Status status="offline">
    <StatusIndicator />
    <StatusLabel />
  </Status>
  <Status status="maintenance">
    <StatusIndicator />
    <StatusLabel />
  </Status>
  <Status status="degraded">
    <StatusIndicator />
    <StatusLabel />
  </Status>
</div>

Props

Status

Props de Status
PropTypeDefaultDescription
status, obrigatóriaStatusValuesem valor padrão
variant"link" | "destructive" | "primary" | "outline" | "secondary" | "ghost" | nullsem valor padrão
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>sem valor padrãoAllows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Estende React.ComponentProps<typeof Badge>. Aceita também os atributos padrão de um elemento React (280 não listados).

StatusIndicator

Estende React.ComponentProps<'span'>. Aceita também os atributos padrão de um elemento React (280 não listados).

StatusLabel

Estende React.ComponentProps<'span'>. Aceita também os atributos padrão de um elemento React (280 não listados).

prop obrigatória.

Composition

O indicador vem antes do rótulo, os dois dentro do Status. O rótulo sem children imprime a palavra do estado em inglês; passe children para traduzir.

Composição de Status

Status

  • StatusIndicator
  • StatusLabel

Metadata

Notas de acessibilidade

Verificado em tests/e2e/status.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA em todos os exemplos. Teclado: a pílula é texto e não entra na sequência de Tab; como link (render do Badge) continua sendo um link real, alcançado por Tab. Leitor de tela: o estado é dito em palavras — o rótulo padrão imprime só a palavra do estado atual, e não as quatro escondidas por CSS como no upstream —, e o ponto fica fora da árvore (aria-hidden), então o significado nunca depende da cor; verificado por teste e pelo snapshot da árvore de acessibilidade do navegador. Cores medidas no navegador: quatro cores distintas e não transparentes em cada tema. Toque verificado em 320px com emulação de toque: as pílulas quebram linha sem rolagem horizontal; não há alvo interativo próprio. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — o ping é decorativo e fica atrás de motion-safe:, então não roda; o ponto continua visível e colorido. Sem ícones estruturais.

Classificação

Layer
Recipe
Domínio
Domain-free (compartilhado)
Categoria
data-display
Status
Stable

Origem e distribuição

Fonte
kibo registry / status
Licença
MIT
URL
https://www.kibo-ui.com/r/status.json
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
Nenhuma
Ícones
Nenhum
Construído sobre
Badge
Usado por
Nenhum ainda