Badge
Color-coded indicators for tags, categories, and statuses.
Color Variants
Color Options
Outline Variants
Pill Shape
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:
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.
Color Variants
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>
Style Variants
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>
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:
- Badge text clearly communicates what it represents
- Badges are used sparingly to avoid visual clutter
- 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>