Status

A cross-platform React status indicator that pairs a coloured dot with an optional inline label.

Installation

npm install @xsolla/xui-status

Imports

import {
  Status,
  type StatusProps,
  type StatusPalette,
  type StatusSize,
  type StatusLabelType,
} from '@xsolla/xui-status';

Quick start

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

export default function QuickStart() {
  return <Status palette="success">Active</Status>;
}

API Reference

<Status>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | children | ReactNode | — | Optional label text rendered next to the dot. | | palette | "default" \| "success" \| "warning" \| "alert" \| "neutral" | "default" | Colour palette for the dot (and optionally the label). | | size | "sm" \| "md" \| "lg" | "md" | Dot size, gap, and label typography. | | labelType | "primary" \| "dot-color" | "primary" | Label colour mode — primary text colour or matching the dot. | | aria-label | string | auto | Accessible label. Auto-generated from palette and string children when omitted. Required for non-string children or localised strings. | | aria-live | "polite" \| "assertive" \| "off" | — | Live-region behaviour. "assertive" switches the role to alert; "off" removes the live-region role entirely. | | id | string | — | HTML id attribute. | | testID | string | — | Test identifier. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

Sizes

| Size | Dot | Gap | Font / line height | | --- | --- | --- | --- | | sm | 4px | 4px | 12px / 16px | | md | 6px | 6px | 14px / 20px | | lg | 8px | 8px | 16px / 24px |

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. |

Examples

Palettes

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

export default function StatusPalettes() {
  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" aria-label="Online" />
      <Status palette="warning" aria-label="Away" />
      <Status palette="alert" aria-label="Offline" />
    </div>
  );
}

Sizes

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

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

Coloured label

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

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

Live region for dynamic updates

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

export default function LiveStatus() {
  const [palette, setPalette] = React.useState<'success' | 'warning' | 'alert'>('success');
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Status palette={palette} aria-live="polite">
        {palette === 'success' ? 'Connected' : palette === 'warning' ? 'Reconnecting' : 'Disconnected'}
      </Status>
      <button onClick={() => setPalette('warning')}>Reconnect</button>
      <button onClick={() => setPalette('alert')}>Disconnect</button>
      <button onClick={() => setPalette('success')}>Restore</button>
    </div>
  );
}

Accessibility

• Defaults to role="status" (implies aria-live="polite"); aria-live="assertive" switches to role="alert"; aria-live="off" removes the live-region role.
• Auto-generates aria-label from palette + string children. Provide an explicit aria-label for non-string content or localised strings.
• The dot is marked aria-hidden so the label (or generated label) carries the meaning.
• Don't rely on colour alone — keep a textual label when the status is meaningful.