Badge
7 semantic color roles — use the role name, not the hue
primarysecondarydangerwarningsuccessinfoai
Dot Variant
Status indicator with leading dot — pass dot prop
OnlineAwayOfflineUnknownActive
Pulsing Badges
Motion-powered pulse via the motion prop — for live status and alerts
CriticalDegradedHeartbeatIncoming
BadgeButton
Interactive badge — as button or link
Notice
Inline notification banners — 4 semantic color variants using operational tokens
Operation completed successfully. All changes have been saved.
Authentication failed. Please check your credentials and try again.
Your session will expire in 5 minutes. Save your work to avoid losing changes.
A new version is available. Refresh the page to get the latest updates.
Avatar
Square (rounded-lg) default — surveillance / tactical aesthetic
AvatarButton
Interactive avatar — as button or link