Component

Status

Show compact state labels with a stable dot, tone, and optional pulse animation.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Status } from "@chitrank2050/monoline-ui/status"

Basic usage

<Status size="md" variant="accent">Open to work</Status>
<Status size="md" variant="success">Available</Status>
<Status size="md" variant="muted">Archived</Status>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Status shows a compact, persistent state such as availability, health, or lifecycle stage.

Avoid when

The message is transient, the state is interactive, or color would be its only explanation.

Accessibility

Status is a text span with a decorative dot hidden from assistive technology. It is not a live region and will not announce changes automatically.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

sizesm | md | lgStatus pill scale

variantaccent | success | mutedVisual state

animatebooleanAdd pulse animation to the status dot (default: false)

childrenReactNodeStatus label

Design tokens

Theme variables this component reads for color, spacing, and motion.

--accentCSS varDefault status colour

--accent-softCSS varDefault status background

--callout-tip-accentCSS varSuccess state colour

Implementation

The source used by the example above, including any state it needs.

import { Status } from "@chitrank2050/monoline-ui/status"

export function Availability() {
  return <Status>Open to work</Status>
}

Compare related components or review the package and theme setup.

01ComponentBadgeComponent · ReferenceReference→02ComponentProgressComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview