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.
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" />Showcase
All variants and sizes:
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
Avatar
A circular (or rounded) user avatar that displays a profile image, 1–2 character initials, or a fallback icon. Supports six sizes, six initials color variants, an optional Status dot at any corner, full RTL layout, and an AvatarGroup for stacking.
Chip
Interactive label pills for filtering, tagging, and selection. Four variants, five intents, five sizes, six rounded options, optional remove button, leading icon/avatar/status slots, and RTL support.