Status

Pequeno ponto indicador para mostrar status como online, offline, erro, etc.

Importação

import { Status } from 'asterui'

Exemplos

Básico

Indicadores de status simples para diferentes estados.

</>

import { Status, Space } from 'asterui'

function App() {
  return (
      <Space size="md">
        <Status type="success" />
        <Status type="warning" />
        <Status type="error" />
        <Status type="info" />
      </Space>
    )
}

export default App

Tamanhos

Variantes de tamanho disponíveis.

</>

import { Status, Space } from 'asterui'

function App() {
  return (
      <Space size="md" align="center">
        <Status type="primary" size="xs" />
        <Status type="primary" size="sm" />
        <Status type="primary" size="md" />
        <Status type="primary" size="lg" />
        <Status type="primary" size="xl" />
      </Space>
    )
}

export default App

Animado

Efeitos de animação ping e bounce.

</>

import { Status, Space } from 'asterui'

function App() {
  return (
      <Space size="lg" align="center">
        <Status type="error" ping />
        <Status type="success" ping />
        <Status type="info" bounce />
      </Space>
    )
}

export default App

Todas as Cores

Todos os tipos de cor disponíveis.

</>

import { Status, Space } from 'asterui'

function App() {
  return (
      <Space size="md">
        <Status type="neutral" />
        <Status type="primary" />
        <Status type="secondary" />
        <Status type="accent" />
        <Status type="info" />
        <Status type="success" />
        <Status type="warning" />
        <Status type="error" />
      </Space>
    )
}

export default App

API

Propriedade	Descrição	Tipo	Padrão
type	Tipo de cor do status	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	'neutral'
size	Tamanho do status	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
ping	Efeito de animação ping	boolean	false
bounce	Efeito de animação bounce	boolean	false
label	Label de acessibilidade	string	-
className	Classes CSS adicionais	string	-

Acessibilidade

• Use a prop label para fornecer um nome acessível
• Considere parear com texto para usuários de leitores de tela
• Animação ping chama atenção para mudanças de status importantes