Status

Punto indicador pequeño para mostrar estado como en línea, fuera de línea, error, etc.

Importar

import { Status } from 'asterui'

Ejemplos

Básico

Indicadores de estado 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

Tamaños

Variantes de tamaño disponibles.

</>

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

Efectos de animación ping y 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

Todos los colores

Todos los tipos de color disponibles.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
type	Tipo de color de estado	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	'neutral'
size	Tamaño de estado	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
ping	Efecto de animación ping	boolean	false
bounce	Efecto de animación bounce	boolean	false
label	Etiqueta de accesibilidad	string	-
className	Clases CSS adicionales	string	-

Accesibilidad

• Usa la prop label para proporcionar un nombre accesible
• Considera emparejar con texto para usuarios de lectores de pantalla
• La animación ping llama la atención a cambios de estado importantes