Email Badge
UIshadcn/ui Badge translated for React Email. Inline <span> label with a cva variant system: default, secondary, outline, muted, destructive, success, warning. Three sizes: sm, default, lg.
core/email-badgeInstallation
1 · Add registry to components.json
2 · Install component
Examples
All variants + in-context usage
Every variant and size, plus realistic inline usage in order status and notification context.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "muted" | "destructive" | "success" | "warning" | — | Visual variant. success and warning use hardcoded green/amber as they fall outside the shadcn semantic token set. |
size | "sm" | "default" | "lg" | — | Badge size. Defaults to default. |