Badge

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.

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:

Prop	Type	Default	Description
title	string	undefined	Text 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
outline	boolean	false	When true, renders an outlined version of the badge
pill	boolean	false	When true, applies fully rounded corners (pill shape)
className	string	undefined	Additional CSS class names
children	ReactNode	undefined	Content of the badge

The component also accepts all standard HTML div attributes.

Design Cue Colors

Standard badges with colors based on design cue variables.

<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.

<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.

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

Pill Shape

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

<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:

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

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

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>