content/docs/components/radix/badge.mdx
npx shadcn@latest add @reui/r-badge
@theme inline {
--color-destructive-foreground: var(--destructive-foreground);
--color-info: var(--info);
--color-info-foreground: var(--info-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-invert: var(--invert);
--color-invert-foreground: var(--invert-foreground);
}
:root {
--destructive-foreground: var(--color-red-800);
--success: var(--color-emerald-500);
--success-foreground: var(--color-emerald-900);
--info: var(--color-violet-500);
--info-foreground: var(--color-violet-900);
--warning: var(--color-yellow-500);
--warning-foreground: var(--color-yellow-900);
--invert: var(--color-zinc-900);
--invert-foreground: var(--color-zinc-50);
}
.dark {
--destructive-foreground: var(--color-red-600);
--success: var(--color-emerald-500);
--success-foreground: var(--color-emerald-600);
--info: var(--color-violet-500);
--info-foreground: var(--color-violet-600);
--warning: var(--color-yellow-500);
--warning-foreground: var(--color-yellow-600);
--invert: var(--color-zinc-700);
--invert-foreground: var(--color-zinc-50);
}
<Step>Install the following dependencies:</Step>
npm install radix-ui
<Step>Copy and paste the following code into your project.</Step>
<ComponentSource styleName="radix-nova" name="badge" title="components/reui/badge.tsx" />
<Step>Update the import paths to match your project setup.</Step>
</Steps> </TabsContent> </CodeTabs>import { Badge } from "@/components/reui/r-badge"
<Badge>Badge</Badge>
This component follows the same API design as the Badge Component from shadcn/ui.
The key difference is that it uses extended color tokens such as --success, --info, --warning and --invert
for badge variants instead of utility classes.
This approach enables consistent, reusable state variants across the project without relying on custom Tailwind color utilities.
<Badge variant="success-light" size="sm">
Success
</Badge>
<Badge variant="outline" radius="full">
Pill
</Badge>
| Prop | Type |
|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "info" | "success" | "warning" | "invert" |
variant (Outline) | "primary-outline" | "warning-outline" | "success-outline" | "info-outline" | "destructive-outline" | "invert-outline" |
variant (Light) | "primary-light" | "warning-light" | "success-light" | "info-light" | "destructive-light" | "invert-light" |
size | "default" | "xs" | "sm" | "lg" | "xl" |
radius | "default" (per theme) | "full" (per-theme max: Vega/Nova/Maia/Mira rounded-full, Lyra rounded-none) |