Status Badge
Display a labeled status with a matching visual indicator.
Preview
Import
import { StatusBadge, StatusDot, StatusPill, OnlineIndicator, PresenceAvatar, Notification, NotificationList, InlineAlert, Callout, BannerAlert, ErrorState, LoadingState, SuccessState, ProgressSteps, TimelineProgress, ToastAction, ToastPromise, SkeletonCard, SkeletonTable, SpinnerOverlay } from "@sigil-ui/components";Usage
<StatusBadge status="success" />
<StatusBadge status="warning" />
<StatusBadge status="error" />Sub-components
This component includes the following parts:
<StatusDot><StatusPill><OnlineIndicator><PresenceAvatar><Notification><NotificationList><InlineAlert><Callout><BannerAlert><ErrorState><LoadingState><SuccessState><ProgressSteps><TimelineProgress><ToastAction><ToastPromise><SkeletonCard><SkeletonTable><SpinnerOverlay>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | "online" | "offline" | "busy" | "away" | "success" | "warning" | "error" | "info" | "neutral" | — | Status configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-success | Success |
--s-primary-contrast | Primary contrast |
--s-text-muted | Text muted |
--s-error | Error |
--s-warning | Warning |
--s-info | Info |
--s-surface | Surface |
--s-text | Text |
--s-radius-full | Radius full |
--s-background | Background |
--s-card-radius | Card radius |
--s-border | Border |