Status
A square status pixel for presence, progress, and unread markers. It never animates: a working agent is a steady light.
Controls
import { Status } from "raft-ui";
<Status />presence draws one of the five status lights of the design system, in place of the variant's colour. Each is a fixed meaning and needs its word nearby; where there is none, make the light an image with a label (role="img" and aria-label).
variantdefault: "default""default" | "primary" | "information" | "muted" | "accent" | "success" | "warning" | "danger"
Semantic status color.
presence"online" | "busy" | "error" | "offline" | "external"
A status light, in place of the variant's colour: online, busy (an agent at work), error, offline or external.
sizedefault: "md""xs" | "sm" | "md" | "lg"
Pixel size: 6, 8, 9 or 11px square.
renderReactElement | (props, state) => ReactElement
Change the root element.
...propsHTMLAttributes<HTMLSpanElement>
Native span attributes plus className. Set --status-color for custom colors.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "primary" | "information" | "muted" | "accent" | "success" | "warning" | "danger" | "default" | Semantic status color. |
presence | "online" | "busy" | "error" | "offline" | "external" | — | A status light, in place of the variant's colour: online, busy (an agent at work), error, offline or external. |
size | "xs" | "sm" | "md" | "lg" | "md" | Pixel size: 6, 8, 9 or 11px square. |
render | ReactElement | (props, state) => ReactElement | — | Change the root element. |
...props | HTMLAttributes<HTMLSpanElement> | — | Native span attributes plus className. Set --status-color for custom colors. |