Status
A small circular status indicator for user presence (online, away, busy, neutral) and feedback states (success, info, warning, error). Five sizes from 8 px to 24 px. Used as a standalone badge or embedded inside Avatar.
Playground
Examples
Default
A basic presence indicator using the default online variant.
Presence states
The four presence variants render as plain colored dots — online, away, busy, and neutral.
Feedback states
The feedback variants — success, info, warning, and error — show an icon at sm and above.
Sizes
Five sizes from xs (8 px) to xl (24 px).
Icon visibility
Use showIcon to force the icon on or off, overriding the per-size default.
Loading
StatusSkeleton renders a placeholder matching each size while data loads.
Installation
pnpm add @tessinaui/uiUsage
import { Status } from "@tessinaui/ui";<Status variant="online" size="md" />
<Status variant="success" size="lg" />
<Status variant="error" size="xl" />API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "online" | "away" | "busy" | "neutral" | "success" | "info" | "warning" | "error" | "online" | Controls background color and icon |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Outer circle diameter: 8 / 12 / 16 / 20 / 24 px |
showIcon | boolean | auto | Override icon visibility. By default icons show for feedback variants (success/info/warning/error) at sm+, and are hidden for presence variants and xs size |
className | string | — | Extra classes for the outer <span> |
All native <span> attributes are forwarded.
Variants
Presence states — plain colored dots (no icon):
online→ green (bg-success)away→ yellow (bg-warning)busy→ red (bg-error)neutral→ grey (bg-secondary)
Feedback states — show an icon at sm and above:
success→ green with checkmarkinfo→ blue with info iconwarning→ yellow with triangleerror→ red with ✕
Sizes
| Size | Diameter | Used with Avatar size |
|---|---|---|
xs | 8 px | xs / sm (20–24 px) |
sm | 12 px | md (32 px) |
md | 16 px | lg (40 px) |
lg | 20 px | xl (56 px) |
xl | 24 px | 2xl (64 px) |
Accessibility
- Renders as
<span role="img" aria-label="{variant}">so screen readers announce the status - Inner icon SVGs are
aria-hidden
Stack
A flex-based layout primitive for arranging items in a row or column. Configurable direction, gap, alignment, justification, wrapping, reversal, dividers, inline display, polymorphic rendering, and LTR/RTL support. Ships with HStack and VStack convenience wrappers.
Stepper
Numeric quantity control with increment and decrement buttons. Two layout variants (pill and floating), five sizes, full intent palette, min/max/step, disabled/readOnly states, and LTR/RTL support.