Badge

Badges are compact elements for displaying status, categories, or counts.

Preview

DefaultSuccessWarningErrorInfo

Installation

Package

import { Badge } from '@smc/darwin-ui';

shadcn CLI

npx shadcn add https://darwin-ui.mandalsuraj.com/registry/badge.json

Usage

import { Badge } from '@smc/darwin-ui';

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Error</Badge>

Variants

Variant	Color	Use Case
default	Gray	Neutral labels
success	Green	Active, completed, positive
warning	Amber	Pending, caution
destructive	Red	Errors, inactive, critical
info	Blue	Informational

Animation

Badges include subtle motion animations on mount for enhanced visual feedback.

API Reference

Prop	Type	Default	Description
variant	BadgeVariant	"default"	Visual style
className	string	-	Additional classes
children	ReactNode	-	Badge content

Types

type BadgeVariant =
  | "default"
  | "success"
  | "warning"
  | "destructive"
  | "info";