Risk badgePro
Low, medium and high risk action badges with a distinct glyph per level.
On this page
ProA payment plan with each step rated; point at a badge for why.
Installation
Usage
import { RiskBadge } from "@/components/ui/chatcn/pro/risk-badge"
<RiskBadge level="high" reason="Moves money and cannot be pulled back." factors={["Spends money", "Cannot be undone"]} />Each level has its own shape, the ones road signs taught everyone: a circle for low, a triangle for medium, an octagon for high. The level reads in grayscale, forced colors and for color blind people; green, amber and red are tints only. With reason or factors, the badge explains the call so people learn what makes an action risky.
Examples
States
ProThree sizes, glyph only and in a sentence.
Props
| Prop | Type | Notes |
|---|---|---|
level | "low" | "medium" | "high" | |
size | "sm" | "md" | "lg" | Default md |
variant | "badge" | "glyph" | glyph is the shape alone, labelled |
reason, factors | ReactNode, string[] | Adds a popover |
label | string | Override the word, for translation |
Keyboard
| Key | Action |
|---|---|
| Enter or Space | Open the reason |
| Esc | Close it |
Accessibility
- The word is always present: visible in the badge, or as the image label for
glyph. - Forced colors swap the tint for an outline.
Motion
The popover grows from the badge in 180 ms. Nothing else moves.