Skip to content
Aggarly OS
  • Getting Started
    • Introduction
  • Foundations
    • Colors
    • Spacing
    • Radius
    • Typography
    • Shadows
    • Z-Index
    • Gradients
    • Tokens
    • RTL & Direction
    • Theming
  • Layout
    • Containers
    • Grid System
    • Layout Utilities
  • Components
    • Alerts
    • Avatars
    • Buttons
    • Button Group
    • Badges
    • Inputs
    • Select
    • Checkbox
    • Counters-timers
    • Radio
    • Switch
    • Stepper
    • Select-pro
    • Cards
    • Modals
    • Dropdown
    • Popover
    • Tooltip
    • Accordion
    • Breadcrumb
    • Tabs
    • Navbar
    • List Group
    • Toasts
    • Skeleton
    • Pagination
    • Progress
    • Table
    • Icons
    • Form
    • Ribbons
    • Spinner
    • Offcanvas
    • Feedback
    • Grid
    • Data UI
  • Data UI
    • Overview
  • Platform
    • Reference DataCore
  • Widgets
    • KPI
    • Analytics
    • Behavior
  • Brand
    • Logo
    • Brand Usage
Components/Badges

Badges

Badges communicate status, counts, and metadata in dense enterprise interfaces (tables, headers, filters, and toolbars). Variants are token-driven, theme-safe, and designed for long work sessions. This page includes animated + live badges and a gamified achievement set.

Default Badges

Solid badges for high-signal statuses and counts.

DefaultPrimaryApprovedNeeds reviewBlockedNeutral
Show code
Default badges (JSX)
import { Badge } from "@/design-system/components/Badge";

export function Example() {
  return (
    <div className="badges-row">
      <Badge>Default</Badge>
      <Badge tone="primary">Primary</Badge>
      <Badge tone="success">Approved</Badge>
      <Badge tone="warning">Needs review</Badge>
      <Badge tone="danger">Blocked</Badge>
      <Badge tone="neutral">Neutral</Badge>
    </div>
  );
}

Additional Tones

Adds requested tones: "yellow" and "dark". Yellow maps to the warning token channel for consistency.

YellowDarkYellow softDark outline
Show code
New tones (JSX)
import { Badge } from "@/design-system/components/Badge";

export function Example() {
  return (
    <div className="badges-row">
      <Badge tone="yellow">Yellow (requested)</Badge>
      <Badge tone="dark">Dark (requested)</Badge>

      <Badge variant="soft" tone="yellow">Yellow soft</Badge>
      <Badge variant="outline" tone="dark">Dark outline</Badge>
    </div>
  );
}

Soft Badges

Soft badges are ideal for tables, filters, and secondary status metadata.

PrimaryActivePendingOverdueDraft
Show code
Soft badges (JSX)
import { Badge } from "@/design-system/components/Badge";

export function Example() {
  return (
    <div className="badges-row">
      <Badge variant="soft" tone="primary">Primary</Badge>
      <Badge variant="soft" tone="success">Active</Badge>
      <Badge variant="soft" tone="warning">Pending</Badge>
      <Badge variant="soft" tone="danger">Overdue</Badge>
      <Badge variant="soft" tone="neutral">Draft</Badge>
    </div>
  );
}

Outline Badges (with Icons)

Outline badges remain readable on busy surfaces while keeping a premium enterprise feel.

OutlineVerifiedFlaggedDenied
Show code
Outline badges + Lucide (JSX)
import { Badge } from "@/design-system/components/Badge";
import { CheckCircle2 } from "lucide-react";

export function Example() {
  return (
    <div className="badges-row">
      <Badge variant="outline" tone="primary">Outline</Badge>
      <Badge variant="outline" tone="success" leadingIcon={<CheckCircle2 />}>Verified</Badge>
      <Badge variant="outline" tone="warning">Flagged</Badge>
      <Badge variant="outline" tone="danger">Denied</Badge>
    </div>
  );
}

Rounded Pill Badges

Pill badges are best for counts, segments, and compact labels.

PillCount: 12Online
Show code
Pill badges (JSX)
import { Badge } from "@/design-system/components/Badge";

export function Example() {
  return (
    <div className="badges-row">
      <Badge shape="pill" tone="primary">Pill</Badge>
      <Badge shape="pill" variant="soft" tone="neutral">Count: 12</Badge>
      <Badge shape="pill" variant="outline" tone="success">Online</Badge>
    </div>
  );
}

Soft Border and Label Badges

Soft-border badges provide structure. Label badges are premium tags for headers and dense tables.

Soft borderHIPAA-readyLabelBetaRestricted
Show code
Soft-border + label (JSX)
import { Badge } from "@/design-system/components/Badge";

export function Example() {
  return (
    <div className="badges-row">
      <Badge variant="soft-border" tone="primary">Soft border</Badge>
      <Badge variant="soft-border" tone="success">HIPAA-ready</Badge>

      <Badge variant="label" tone="neutral">Label</Badge>
      <Badge variant="label" tone="yellow">Beta</Badge>
      <Badge variant="label" tone="danger">Restricted</Badge>
    </div>
  );
}

Gradient Badges

Premium gradient badges for rare, high-emphasis markers (e.g., Premium, Priority).

PremiumApprovedPrioritySecure
Show code
Gradient badges (JSX)
import { Badge } from "@/design-system/components/Badge";
import { Sparkles } from "lucide-react";

export function Example() {
  return (
    <div className="badges-row">
      <Badge variant="gradient" tone="primary" leadingIcon={<Sparkles />}>Premium</Badge>
      <Badge variant="gradient" tone="success">Approved</Badge>
      <Badge variant="gradient" tone="yellow">Priority</Badge>
      <Badge variant="gradient" tone="dark">Secure</Badge>
    </div>
  );
}

Animated Badges

Subtle enterprise-safe animations for attention without being distracting. Respects reduced-motion.

UpdatingSuccessFeatured
Show code
Animated badges (JSX)
import { Badge } from "@/design-system/components/Badge";
import { Activity, Sparkles } from "lucide-react";

export function Example() {
  return (
    <div className="badges-row">
      <Badge variant="soft" tone="primary" animation="pulse" leadingIcon={<Activity />}>
        Updating
      </Badge>

      <Badge variant="gradient" tone="success" animation="glow">
        Success
      </Badge>

      <Badge variant="achievement" tone="primary" animation="shine" leadingIcon={<Sparkles />}>
        Featured
      </Badge>
    </div>
  );
}

Live Badges

Use live badges for real-time states (Live, Syncing, Monitoring). Adds a ping ring to the dot.

LiveSyncingMonitoring
Show code
Live badges (JSX)
import { Badge } from "@/design-system/components/Badge";
import { Radio, Shield } from "lucide-react";

export function Example() {
  return (
    <div className="badges-row">
      <Badge variant="soft" tone="success" live leadingIcon={<Radio />}>
        Live
      </Badge>

      <Badge variant="soft" tone="warning" live>
        Syncing
      </Badge>

      <Badge variant="outline" tone="dark" live leadingIcon={<Shield />}>
        Monitoring
      </Badge>
    </div>
  );
}

Buttons with Badges

Two enterprise patterns: inline count badges inside a button, and corner badges for notifications.

3
Show code
Buttons with badges (JSX)
import { Button } from "@/design-system/components/Button";
import { Badge } from "@/design-system/components/Badge";

export function Example() {
  return (
    <div className="badges-toolbar">
      <Button variant="ghost" size="sm">
        Inbox <Badge variant="soft" tone="primary" shape="pill">12</Badge>
      </Button>

      <span className="badge-anchor">
        <Button variant="primary" size="sm">
          Notifications
        </Button>
        <Badge className="badge-corner" size="xs" shape="pill" tone="danger">
          3
        </Badge>
      </span>
    </div>
  );
}

Header Pattern

Enterprise header layout: title + environment tag + right-side status.

Students

Beta
Synced
Show code
Header + badges (JSX)
import { Badge } from "@/design-system/components/Badge";

export function Example() {
  return (
    <div className="badge-header-row">
      <div className="badge-header-left">
        <h3 className="h3">Students</h3>
        <Badge variant="label" tone="yellow">Beta</Badge>
      </div>

      <Badge variant="soft" tone="success" live>Synced</Badge>
    </div>
  );
}

Gamified Badges

Achievement-style badges for motivation layers: streaks, levels, milestones, and recognition. Use sparingly in enterprise apps.

Top Performer7‑Day StreakLevel 12Elite
Show code
Gamified badges (JSX)
import { Badge } from "@/design-system/components/Badge";
import { Trophy, Flame, Zap, Crown } from "lucide-react";

export function Example() {
  return (
    <div className="badges-row">
      <Badge variant="achievement" tone="yellow" shape="pill" leadingIcon={<Trophy />} animation="shine">
        Top Performer
      </Badge>

      <Badge variant="achievement" tone="danger" shape="pill" leadingIcon={<Flame />} animation="glow">
        7‑Day Streak
      </Badge>

      <Badge variant="achievement" tone="primary" shape="pill" leadingIcon={<Zap />} animation="pulse">
        Level 12
      </Badge>

      <Badge variant="achievement" tone="dark" shape="pill" leadingIcon={<Crown />} animation="shine">
        Elite
      </Badge>
    </div>
  );
}