StatusBadge
A StatusBadge component from the Sigil design system.
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";Preview
Usage
<StatusBadge>...</StatusBadge>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" |
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 |