MoonUI

Badge

Free

Displays a badge or label with various styles and sizes. Perfect for status indicators, tags, and notification counts.

Installation

Install via CLI

npx @moontra/moonui-cli add badge

Usage

Badge

Examples

Corner Radius

The radius prop controls corner rounding independently of size — pill by default, or squared off to match a denser UI

default
lg
sm
none

Status Dot and Leading Icon

withDot prefixes a small status dot; leftIcon accepts any node when a dot is not specific enough

Operational
Degraded
Featured
v5.1.0

Removable Filter Tags

removable adds a dismiss control and calls onRemove — the usual shape for active filters above a table or list

Design
Engineering
Marketing

In Context: List Rows

Badges earn their keep inside a container — here they carry row status without competing with the primary label

  • api-gateway
    Healthy
  • worker-queue
    Degraded
  • billing-sync
    Down

Variants

All available badge variants for different use cases

Primary
Secondary
Outline
Destructive
Success
Warning
Ghost
Pro
Admin

Sizes

Different badge sizes for various contexts

Small
Medium
Large

With Icons

Badges with icons for enhanced visual context

✓Approved
⏰Pending
Removable×

Status Badges

Badges for different status indicators

Active
Pending
Draft
Expired

Notification Badges

Small badges for notification counts

3
99+
NEW

Dark Mode Support

Badges adapt to light and dark themes

Light Mode
Default
Secondary
Outline
Destructive
Dark Mode Preview
Default
Secondary
Outline
Destructive

Category Tags

Badges used as category or topic tags

React
TypeScript
Next.js
Tailwind CSS
Radix UI

Label Badges

Badges for labeling and categorization

Priority:
High
Medium
Low
Environment:
Production
Staging
Development