Status
Presence, progress, unread, and compact status markers.
Controls
import { Status } from "raft-ui";
<Status />attention only styles the dot. Soft wash on the icon comes from a tinted duplicate of the underlying content, masked toward the marker. Same stack as elegant NotificationCenterTrigger.
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "primary" | "information" | "muted" | "accent" | "success" | "warning" | "danger" | "default" | Semantic status color. |
size | "xs" | "sm" | "md" | "lg" | "md" | Dot diameter. xs is the old compact AttentionDot size. |
pulse | boolean | false | Animated status marker. |
attention | boolean | false | Elegant-only glow ring. Used by NotificationCenterTrigger. No visual effect on brutal. |
render | ReactElement | (props, state) => ReactElement | — | Change the root element. |
...props | HTMLAttributes<HTMLSpanElement> | — | Native span attributes plus className. Set --status-color for custom colors. |