Status

Small indicator dot to show status like online, offline, error, etc.

Import

import { Status } from 'asterui'

Examples

Basic

Simple status indicators for different states.

</>

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

Sizes

Available size variants.

</>

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

Animated

Ping and bounce animation effects.

</>

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

All Colors

All available color types.

</>

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

Property	Description	Type	Default
type	Status color type	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	'neutral'
size	Status size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
ping	Ping animation effect	boolean	false
bounce	Bounce animation effect	boolean	false
label	Accessibility label	string	-
className	Additional CSS classes	string	-

Accessibility

• Use the label prop to provide an accessible name
• Consider pairing with text for screen reader users
• Ping animation draws attention to important status changes