Skip to main content

​
Overview

DefaultSecondaryOutlineDestructiveSuccessWarningErrorInfo
Badge is a compact, non-interactive label. Use it to communicate status, categories, roles, or counts at a glance. Badges can include a leading icon or a colored status dot.

​
Installation

npm install @araf-ds/core

​
Usage

import { Badge } from "@araf-ds/core"

export default function Example() {
  return <Badge variant="success">Active</Badge>
}

​
Variants

Badge has 8 semantic color variants to communicate different meanings.

​
Default & Secondary

DefaultSecondaryOutline
Use Default for emphasis labels, Secondary for neutral tags, Outline for minimal de-emphasized labels. 
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>

​
Status Variants

SuccessWarningErrorInfoDestructive
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="info">In Review</Badge>
<Badge variant="destructive">Suspended</Badge>

When to use

  • Status of table rows (active, pending, error)
  • User role or permission labels
  • Notification counts
  • Category tags

When not to use

  • Actionable elements — use Button instead
  • Long text — badges are for short labels (1–3 words)
  • Decorative purposes without meaning

​
With Dot Indicator

A colored dot replaces or precedes the label for compact status display.
OnlineAwayOffline
<Badge variant="success" dot>Online</Badge>
<Badge variant="warning" dot>Away</Badge>
<Badge variant="error" dot>Offline</Badge>

​
Sizes

SmallMediumLarge
SizePropUse case
SmallsmDense tables, compact UI
MediummdDefault — most contexts
LargelgProminent labels, marketing
<Badge size="sm" variant="success">Active</Badge>
<Badge size="md" variant="success">Active</Badge>
<Badge size="lg" variant="success">Active</Badge>

​
API Reference

​
variant
string
default:"default"
Semantic color variant. Values: default · secondary · outline · destructive · success · warning · error · info
​
size
string
default:"md"
Badge size. Values: sm · md · lg
​
dot
boolean
default:"false"
Shows a colored status dot to the left of the label text.
​
icon
ReactNode
Optional leading icon element rendered before the label.
​
children
ReactNode
Badge label text content.
​
className
string
Additional Tailwind classes for custom overrides.

​
Accessibility

  • Badges are purely visual — use aria-label on the parent element to provide context for screen readers when the badge alone does not convey meaning
  • Avoid using color alone to convey status — always pair with a label or icon
  • Do not use badges as interactive elements; use Button for clickable actions

​
Do’s & Don’ts

Do

  • Use the correct semantic variant for the meaning (success → green, error → red)
  • Keep badge text short — 1 to 3 words maximum
  • Use dot badges when space is very limited
  • Pair with icons for additional clarity in critical states

Don't

  • Don’t use more than 2 different badge variants in the same table column
  • Don’t make badges clickable — they are display-only
  • Don’t use custom colors outside the design system variants
  • Don’t place badges on top of images or complex backgrounds without sufficient contrast