Feedback

Status

A compact pill that pairs a colored, optionally pulsing dot with a label. Choose a semantic tone (success, warning, info, destructive, or neutral) and supply your own text.

Source

Preview

GitHub

'use client';

import { Status, StatusIndicator, StatusLabel } from '@brika/clay/components/status';

/** A status pill: a pulsing colored dot plus your own label. */
export default function StatusDefaultDemo() {
  return (
    <Status variant="success">
      <StatusIndicator />
      <StatusLabel>Operational</StatusLabel>
    </Status>
  );
}

01 Installation

Install

Pull Status from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Status } from "@brika/clay";

tsxGranular1 line

import { Status } from "@brika/clay/components/status";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxStatus.tsx13 lines

'use client';

import { Status, StatusIndicator, StatusLabel } from '@brika/clay/components/status';

/** A status pill: a pulsing colored dot plus your own label. */
export default function StatusDefaultDemo() {
  return (
    <Status variant="success">
      <StatusIndicator />
      <StatusLabel>Operational</StatusLabel>
    </Status>
  );
}

03 Examples

Status, every way

Variants

All five semantic tones (success, warning, info, destructive, neutral) shown side by side with a label.

GitHub

'use client';

import { Status, StatusIndicator, StatusLabel } from '@brika/clay/components/status';

/** All five semantic tones (success, warning, info, destructive, neutral) shown side by side with a label. */
export default function StatusVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Status variant="success">
        <StatusIndicator />
        <StatusLabel>Operational</StatusLabel>
      </Status>
      <Status variant="warning">
        <StatusIndicator />
        <StatusLabel>Degraded</StatusLabel>
      </Status>
      <Status variant="info">
        <StatusIndicator />
        <StatusLabel>Maintenance</StatusLabel>
      </Status>
      <Status variant="destructive">
        <StatusIndicator />
        <StatusLabel>Major outage</StatusLabel>
      </Status>
      <Status variant="neutral">
        <StatusIndicator pulse={false} />
        <StatusLabel>Offline</StatusLabel>
      </Status>
    </div>
  );
}

04 Accessibility

Accessibility

The colored dot is aria-hidden; the StatusLabel text carries the meaning, so state is never conveyed by color alone.
Always provide a StatusLabel; color-blind and assistive-tech users rely on the text, not the dot.
For a status that changes at runtime, wrap the pill in a container with aria-live="polite" so updates are announced.

05 API reference

API reference

Props specific to Status. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

<Status />

1 prop

variantdefault 'neutral'
StatusVariant
Color tone of the indicator. Defaults to neutral.

<StatusIndicator />

1 prop

pulsedefault true
boolean
Render the soft pulsing ring behind the dot. Defaults to true.

<StatusLabel />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.