Status

A cross-platform React status indicator component that displays a colored dot with an optional text label to indicate state or condition.

Installation

npm install @xsolla/xui-status
# or
yarn add @xsolla/xui-status

Demo

Basic Status

import * as React from 'react';
import { Status } from '@xsolla/xui-status';

export default function BasicStatus() {
  return (
    <div style={{ display: 'flex', gap: 24 }}>
      <Status palette="success">Active</Status>
      <Status palette="warning">Pending</Status>
      <Status palette="alert">Error</Status>
      <Status palette="neutral">Inactive</Status>
    </div>
  );
}

Dot Only

import * as React from 'react';
import { Status } from '@xsolla/xui-status';

export default function DotOnly() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Status palette="success" />
      <Status palette="warning" />
      <Status palette="alert" />
      <Status palette="neutral" />
    </div>
  );
}

Different Sizes

import * as React from 'react';
import { Status } from '@xsolla/xui-status';

export default function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
      <Status size="sm" palette="success">Small</Status>
      <Status size="md" palette="success">Medium</Status>
      <Status size="lg" palette="success">Large</Status>
    </div>
  );
}

Anatomy

import { Status } from '@xsolla/xui-status';

<Status
  palette="success"       // success, warning, alert, neutral, default
  size="md"                // s, m, l
  labelType="primary"     // primary or dot-color
  uppercase={true}        // Uppercase text
>
  Label text
</Status>

Examples

Order Status

import * as React from 'react';
import { Status } from '@xsolla/xui-status';

export default function OrderStatus() {
  const orders = [
    { id: '001', status: 'Completed', palette: 'success' as const },
    { id: '002', status: 'Processing', palette: 'warning' as const },
    { id: '003', status: 'Failed', palette: 'alert' as const },
    { id: '004', status: 'Cancelled', palette: 'neutral' as const },
  ];

  return (
    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
      <thead>
        <tr>
          <th style={{ textAlign: 'left', padding: 8 }}>Order ID</th>
          <th style={{ textAlign: 'left', padding: 8 }}>Status</th>
        </tr>
      </thead>
      <tbody>
        {orders.map(({ id, status, palette }) => (
          <tr key={id}>
            <td style={{ padding: 8 }}>{id}</td>
            <td style={{ padding: 8 }}>
              <Status palette={palette}>{status}</Status>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Service Health

import * as React from 'react';
import { Status } from '@xsolla/xui-status';

export default function ServiceHealth() {
  const services = [
    { name: 'API', status: 'operational', palette: 'success' as const },
    { name: 'Database', status: 'degraded', palette: 'warning' as const },
    { name: 'CDN', status: 'operational', palette: 'success' as const },
    { name: 'Auth', status: 'outage', palette: 'alert' as const },
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {services.map(({ name, status, palette }) => (
        <div
          key={name}
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            padding: 12,
            border: '1px solid #e0e0e0',
            borderRadius: 8,
          }}
        >
          <span>{name}</span>
          <Status palette={palette}>{status}</Status>
        </div>
      ))}
    </div>
  );
}

User Online Status

import * as React from 'react';
import { Status } from '@xsolla/xui-status';
import { Avatar } from '@xsolla/xui-avatar';

export default function UserOnlineStatus() {
  const users = [
    { name: 'John Doe', online: true },
    { name: 'Jane Smith', online: true },
    { name: 'Bob Wilson', online: false },
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {users.map(({ name, online }) => (
        <div key={name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Avatar size="md" text={name.split(' ').map(n => n[0]).join('')} />
          <span style={{ flex: 1 }}>{name}</span>
          <Status
            palette={online ? 'success' : 'neutral'}
            size="sm"
          >
            {online ? 'Online' : 'Offline'}
          </Status>
        </div>
      ))}
    </div>
  );
}

Colored Label

import * as React from 'react';
import { Status } from '@xsolla/xui-status';

export default function ColoredLabel() {
  return (
    <div style={{ display: 'flex', gap: 24 }}>
      <Status palette="success" labelType="primary">Primary Label</Status>
      <Status palette="success" labelType="dot-color">Colored Label</Status>
    </div>
  );
}

Lowercase Status

import * as React from 'react';
import { Status } from '@xsolla/xui-status';

export default function LowercaseStatus() {
  return (
    <div style={{ display: 'flex', gap: 24 }}>
      <Status palette="success" uppercase>UPPERCASE</Status>
      <Status palette="success" uppercase={false}>Sentence case</Status>
    </div>
  );
}

API Reference

Status

StatusProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Label text (optional). | | palette | "success" \| "warning" \| "alert" \| "neutral" \| "default" | "default" | Status color palette. | | size | "sm" \| "md" \| "lg" | "md" | Component size. | | labelType | "primary" \| "dot-color" | "primary" | Label color mode. | | uppercase | boolean | true | Transform text to uppercase. |

Size Specifications

| Size | Dot Size | Gap | Font Size | Line Height | | :--- | :------- | :-- | :-------- | :---------- | | sm | 4px | 4px | 12px | 16px | | md | 6px | 6px | 14px | 20px | | lg | 8px | 8px | 16px | 24px |

Color Palettes

| Palette | Use Case | | :------ | :------- | | success | Active, completed, operational | | warning | Pending, degraded, attention needed | | alert | Error, failed, critical | | neutral | Inactive, offline, cancelled | | default | Generic/disabled state |

Label Types

| Type | Description | | :--- | :---------- | | primary | Uses theme's primary text color | | dot-color | Uses the same color as the dot |

Accessibility

• Status information should not rely solely on color
• Text labels provide context for screen readers
• Consider using aria-live for dynamic status updates
• Ensure sufficient color contrast for all palettes