UI Components

Badge

A small status indicator for labeling items with colors, counts, or keywords

Quick Preview

DefaultSuccessWarningErrorOutlineSecondary

Structure

Anatomy of the Badge — a status pill with an optional inline icon.

✦Label

Label — required text or ReactNodeIcon — optional, placed before labelPill container — rounded-full, colored by variant

States

Badge variants represent semantic states — use them to communicate status at a glance.

Variants — semantic states

Each variant signals a different meaning

6 states

Default

Neutral / informational

Success

Positive / completed

Warning

Caution / pending

Error

Failure / danger

Outline

Minimal / low emphasis

Secondary

Subtle / supporting

Sizes

Two size tokens — sm md (default).

Sizes — sm / md

Visual comparison across all variants and sizes

8 states

Default

Default sm

Default

Default md

Success

Success sm

Success

Success md

Warning

Warning sm

Warning

Warning md

Error

Error sm

Error

Error md

Installation

// Copy the Badge component from
src/components/ui/Badge.tsx

Usage

import { Badge } from '@/components/ui/Badge'

export default function Example() {
  return <Badge variant="success">Active</Badge>
}

Examples

Sizes

SmallMedium

With Icons

✓ Verified✕ Rejected⚠ Pending

In Context — Product Card

Pro PlanNewAvailable

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a ui component named Badge in React/Next.js.
Goal: recreate the same overall UI and behavior as the Badge reference from a component gallery.
What it needs to communicate: A small status indicator for labeling items with colors, counts, or keywords.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Keep the API concise and reusable.
- Make visual states feel polished and consistent across variants and sizes.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- variant: "default" | "success" | "warning" | "error" | "outline" | "secondary" — default "default" — Color scheme of the badge
- size: "sm" | "md" — default "md" — Size of the badge
- children: React.ReactNode — required — Badge content
- className: string — Additional CSS classes

Reference usage patterns:
- Default Badge

```tsx
<Badge>New</Badge>
```

- All Variants

```tsx
<div className="flex gap-2">
  <Badge variant="default">Default</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="error">Error</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="secondary">Secondary</Badge>
</div>
```

Feature expectations:
- 6 color variants (default, success, warning, error, outline, secondary)
- 2 sizes (sm, md)
- Rounded-full pill shape
- Border included in all variants
- Composable — accepts any children (text, icon, count)

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`variant`	`"default" \| "success" \| "warning" \| "error" \| "outline" \| "secondary"`	`"default"`	Color scheme of the badge
`size`	`"sm" \| "md"`	`"md"`	Size of the badge
`children`*	`React.ReactNode`	-	Badge content
`className`	`string`	-	Additional CSS classes

Features

✓6 color variants (default, success, warning, error, outline, secondary)
✓2 sizes (sm, md)
✓Rounded-full pill shape
✓Border included in all variants
✓Composable — accepts any children (text, icon, count)