ContextQMD
Back to Reui

Badge

content/docs/components/base/badge.mdx

2.0.05.5 KB
Original Source
<ComponentPreview styleName="base-nova" name="c-badge-1" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">
bash
npx shadcn@latest add @reui/badge
</TabsContent> <TabsContent value="manual"> <Steps> <Step> Import the following variables into your CSS file
css
@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>

<Step>Install the following dependencies:</Step>

bash
npm install @base-ui/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource styleName="base-nova" name="badge" title="components/reui/badge.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

tsx
import { Badge } from "@/components/reui/badge"
tsx
<Badge>Badge</Badge>

Examples

Secondary

<ComponentPreview styleName="base-nova" name="c-badge-2" />

Destructive

<ComponentPreview styleName="base-nova" name="c-badge-3" />

Success

<ComponentPreview styleName="base-nova" name="c-badge-4" />

Info

<ComponentPreview styleName="base-nova" name="c-badge-5" />

Warning

<ComponentPreview styleName="base-nova" name="c-badge-6" />

Outline

<ComponentPreview styleName="base-nova" name="c-badge-7" />

Primary Outline

<ComponentPreview styleName="base-nova" name="c-badge-8" />

Destructive Outline

<ComponentPreview styleName="base-nova" name="c-badge-9" />

Info Outline

<ComponentPreview styleName="base-nova" name="c-badge-10" />

Success Outline

<ComponentPreview styleName="base-nova" name="c-badge-11" />

Warning Outline

<ComponentPreview styleName="base-nova" name="c-badge-12" />

Invert Outline

<ComponentPreview styleName="base-nova" name="c-badge-12-1" />

Primary Light

<ComponentPreview styleName="base-nova" name="c-badge-13" />

Destructive Light

<ComponentPreview styleName="base-nova" name="c-badge-14" />

Success Light

<ComponentPreview styleName="base-nova" name="c-badge-15" />

Info Light

<ComponentPreview styleName="base-nova" name="c-badge-16" />

Warning Light

<ComponentPreview styleName="base-nova" name="c-badge-17" />

Size

<ComponentPreview styleName="base-nova" name="c-badge-18" />

Full Radius

<ComponentPreview styleName="base-nova" name="c-badge-19" />

With Icon

<ComponentPreview styleName="base-nova" name="c-badge-20" />

With Icon Button

<ComponentPreview styleName="base-nova" name="c-badge-21" />

With Dot

<ComponentPreview styleName="base-nova" name="c-badge-22" /> <ComponentPreview styleName="base-nova" name="c-badge-23" />

API Reference

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.

tsx
<Badge variant="success-light" size="sm">
  Success
</Badge>
tsx
<Badge variant="outline" radius="full">
  Pill
</Badge>

Props

PropType
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)