15.13Component
Alert & badge.
Inline callouts that live inside content, not floating over it. Use for one-time notices the operator can read, act on, or dismiss in place.
Default · informational
Heads up.
Klarna chargeback evidence is auto-assembled five days before the deadline. You can review or override anytime.
Destructive · attention required
Shopify connection expired.
Re-authorize from settings within 7 days to keep order syncs flowing.
Badge variants
DefaultSecondaryOutlineDestructive
Badge is the generic Radix-styled pill for non-status counts (new releases, beta flags, version labels). For order or chargeback status, reach for StatusBadge instead so the signal palette stays consistent.
Inline composition · trust-signal pattern
Two-factor authentication is on.
Required for every workspace member as of v2.6. Nothing to do here.
- Alert radius
- rounded-xl
- Alert padding
- px-4 py-3
- Alert icon
- size-4 · stroke 1.75 · leading
- Badge radius
- rounded-md
- Badge padding
- px-2 · h-5
- destructive tone
- signal-red bg + foreground · paired with literal word