Badge

Color-coded indicators for tags, categories, and statuses.

Color Variants

Default
Primary
Secondary
Accent
Destructive
Muted
Blank

Color Options

Green
Red
Yellow
Blue
Indigo
Purple
Pink

Outline Variants

Default
Primary
Secondary
Destructive
Red
Blue

Pill Shape

Default
Primary
Green
Red
Blue

Overview

The Badge component provides visual indicators for statuses, categories, or labels in your application. It comes with various color options, outline styles, and shape variants to match your design needs.

Badge

Description

A lightweight component for displaying short status text, categories, or labels.

Usage

import { Badge } from "@crafted-ui/react";

<Badge>New</Badge>

Props

The Badge component accepts the following props:

PropTypeDefaultDescription
titlestringundefinedText content for the badge (alternative to using children)
clr’blank’ | ‘default’ | ‘primary’ | ‘muted’ | ‘secondary’ | ‘accent’ | ‘destructive’ | ‘green’ | ‘red’ | ‘yellow’ | ‘blue’ | ‘indigo’ | ‘purple’ | ‘pink''default’Sets the badge’s color scheme
outlinebooleanfalseWhen true, renders an outlined version of the badge
pillbooleanfalseWhen true, applies fully rounded corners (pill shape)
classNamestringundefinedAdditional CSS class names
childrenReactNodeundefinedContent of the badge

The component also accepts all standard HTML div attributes.

Color Variants

Design Cue Colors

Standard badges with colors based on design cue variables.

Default
Primary
Secondary
Accent
Destructive
Muted
Blank
<Badge>Default</Badge>
<Badge clr="primary">Primary</Badge>
<Badge clr="secondary">Secondary</Badge>
<Badge clr="accent">Accent</Badge>
<Badge clr="destructive">Destructive</Badge>
<Badge clr="muted">Muted</Badge>
<Badge clr="blank">Blank</Badge>

Color Variants

Base colors for badges with specific color choices.

Green
Red
Yellow
Blue
Indigo
Purple
Pink
<Badge clr="green">Green</Badge>
<Badge clr="red">Red</Badge>
<Badge clr="yellow">Yellow</Badge>
<Badge clr="blue">Blue</Badge>
<Badge clr="indigo">Indigo</Badge>
<Badge clr="purple">Purple</Badge>
<Badge clr="pink">Pink</Badge>

Outline Variants

All badge colors offer outline variants.

Default
Primary
Accent
Destructive
Blue
Purple
<Badge outline>Default</Badge>
<Badge clr="primary" outline>Primary</Badge>
<Badge clr="accent" outline>Accent</Badge>
<Badge clr="destructive" outline>Destructive</Badge>
<Badge clr="blue" outline>Blue</Badge>
<Badge clr="purple" outline>Purple</Badge>

Style Variants

Pill Shape

Applies fully rounded corners to create a pill-shaped badge.

Default
Primary
Destructive
<Badge pill>Default</Badge>
<Badge clr="primary" pill>Primary</Badge>
<Badge clr="destructive" pill>Destructive</Badge>

Combined Variants

Variants can be combined for more specific styling:

Primary Outlined Pill
Blue Outlined Pill
<Badge clr="primary" outline pill>Primary Outlined Pill</Badge>
<Badge clr="blue" outline pill>Blue Outlined Pill</Badge>

Accessibility

The Badge component follows accessibility best practices:

  • Uses sufficient color contrast ratios for text readability
  • Keeps content concise and meaningful
  • Avoids relying solely on color to convey information

When implementing badges, ensure that:

  1. Badge text clearly communicates what it represents
  2. Badges are used sparingly to avoid visual clutter
  3. Badge colors are consistent with your application’s color semantics

Examples

Basic Badge

<Badge>New</Badge>

Status Badge

<Badge clr="green">Active</Badge>

Badge with Icon

<Badge clr="primary">
  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm0 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm.5-5.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 1 0v2.5z"/>
  </svg>
  <span>Important</span>
</Badge>

Warning Badge

<Badge clr="yellow" pill>Warning</Badge>