Badge

Badge

Variants

DefaultSuccessErrorWarningInfoAccent

With Icons

✓ Completed✕ Failed⚠ Warningℹ Info

Usage

import { Badge } from "@f0rbit/ui";

<Badge>Default</Badge>
<Badge variant="success">Active</Badge>

Props

Prop	Type	Default	Description
variant	"default" | "success" | "error" | "warning" | "info" | "accent"	"default"	Visual style variant

Variants

Badges support multiple semantic variants:

<Badge>Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="accent">Accent</Badge>

• Default: Neutral labeling without semantic meaning
• Success: Positive states like “Completed” or “Active”
• Error: Negative states like “Failed” or “Rejected”
• Warning: Caution states like “Pending review”
• Info: Informational states
• Accent: Highlighted or featured items

With Icons

Combine badges with icons for enhanced visual communication:

<Badge variant="success">
  <span>✓</span> Completed
</Badge>
<Badge variant="error">
  <span>✕</span> Failed
</Badge>
<Badge variant="warning">
  <span>⚠</span> Warning
</Badge>

Common Use Cases

Status Indicators

<Badge variant="success">Online</Badge>
<Badge variant="error">Offline</Badge>
<Badge variant="warning">Away</Badge>

Labels

<Badge>New</Badge>
<Badge variant="accent">Featured</Badge>
<Badge variant="info">Beta</Badge>

Counts

<Badge>3 items</Badge>
<Badge variant="error">5 errors</Badge>