> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.
# Badge
> A compact label for communicating status, categories, counts, or metadata — available in 8 semantic variants and 3 sizes.
## Overview
Default
Secondary
Outline
Destructive
Success
Warning
Error
Info
**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
```bash npm theme={null}
npm install @araf-ds/core
```
```bash yarn theme={null}
yarn add @araf-ds/core
```
```bash pnpm theme={null}
pnpm add @araf-ds/core
```
***
## Usage
```tsx theme={null}
import { Badge } from "@araf-ds/core"
export default function Example() {
return Active
}
```
***
## Variants
Badge has **8 semantic color variants** to communicate different meanings.
### Default & Secondary
Default
Secondary
Outline
Use Default for emphasis labels, Secondary for neutral tags, Outline for minimal de-emphasized labels.
```tsx theme={null}
Default
Secondary
Outline
```
### Status Variants
Success
Warning
Error
Info
Destructive
```tsx theme={null}
Active
Pending
Failed
In Review
Suspended
```
* Status of table rows (active, pending, error)
* User role or permission labels
* Notification counts
* Category tags
* 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.
Online
Away
Offline
```tsx theme={null}
Online
Away
Offline
```
***
## Sizes
Small
Medium
Large
| Size | Prop | Use case |
| ------ | ---- | --------------------------- |
| Small | `sm` | Dense tables, compact UI |
| Medium | `md` | Default — most contexts |
| Large | `lg` | Prominent labels, marketing |
```tsx theme={null}
Active
Active
Active
```
***
## API Reference
Semantic color variant. Values: `default` · `secondary` · `outline` · `destructive` · `success` · `warning` · `error` · `info`
Badge size. Values: `sm` · `md` · `lg`
Shows a colored status dot to the left of the label text.
Optional leading icon element rendered before the label.
Badge label text content.
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
* 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 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