Badge

The Badge component displays a small label for status indicators, categories, or counts.

Preview

DefaultSuccessWarningDangerInfo

Import

import { Badge } from 'meridian';

Props

Prop	Type	Default	Description
variant	"default" | "success" | "warning" | "danger" | "info"	default	Visual variant indicating status or category

Usage

Basic

<Badge>Label</Badge>

Variants

Use the variant prop to indicate different statuses:

// Default neutral badge
<Badge>Default</Badge>

// Operational/success state
<Badge variant="success">Operational</Badge>

// Warning/caution state
<Badge variant="warning">Caution</Badge>

// Error/danger state
<Badge variant="danger">Critical</Badge>

// Informational
<Badge variant="info">Info</Badge>

Status Variants

DefaultOperationalCautionCriticalInfo

Real-World Examples

// System status
<Badge variant="success">Online</Badge>
<Badge variant="danger">Offline</Badge>

// Priority labels
<Badge variant="danger">High Priority</Badge>
<Badge variant="warning">Medium</Badge>
<Badge>Low</Badge>

// Categories
<Badge variant="info">Documentation</Badge>
<Badge variant="info">Tutorial</Badge>