Badge

Usage

import { Badge } from '@acronis-platform/shadcn-uikit';

Default variants

The badge supports multiple visual variants for different contexts.

Default

Secondary

Destructive

Outline

View source

import { Badge } from '@acronis-platform/shadcn-uikit/react';

export function BadgeDefaultVariants() {
  return (
    <div className="flex flex-wrap gap-4">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

Status variants

Status-specific badge variants for conveying state.

Success

Info

Warning

Critical

Danger

Neutral

View source

import { Badge } from '@acronis-platform/shadcn-uikit/react';

export function BadgeStatusVariants() {
  return (
    <div className="flex flex-wrap gap-4">
      <Badge variant="success">Success</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="critical">Critical</Badge>
      <Badge variant="danger">Danger</Badge>
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="ai">AI</Badge>
      <Badge variant="ai-solid">AI</Badge>
    </div>
  );
}

Small

A compact badge size for tighter layouts.

TAG

View source

import { Badge } from '@acronis-platform/shadcn-uikit/react';

export function BadgeSmall() {
  return (
    <div className="flex flex-wrap gap-4">
      <Badge variant="success" className="text-[10px] py-0">
        TAG
      </Badge>
      <Badge variant="info" className="text-[10px] py-0">
        TAG
      </Badge>
      <Badge variant="warning" className="text-[10px] py-0">
        TAG
      </Badge>
      <Badge variant="critical" className="text-[10px] py-0">
        TAG
      </Badge>
      <Badge variant="danger" className="text-[10px] py-0">
        TAG
      </Badge>
      <Badge variant="neutral" className="text-[10px] py-0">
        TAG
      </Badge>
    </div>
  );
}

With icons

Badges can include icons alongside text for additional context.

✓ Success

ℹ Info

⚠ Warning

✕ Danger

View source

import { Badge } from '@acronis-platform/shadcn-uikit/react';

export function BadgeWithIcons() {
  return (
    <div className="flex flex-wrap gap-4">
      <Badge variant="success" className="gap-1">
        <span className="text-xs">✓</span> Success
      </Badge>
      <Badge variant="info" className="gap-1">
        <span className="text-xs">ℹ</span> Info
      </Badge>
      <Badge variant="warning" className="gap-1">
        <span className="text-xs">⚠</span> Warning
      </Badge>
      <Badge variant="danger" className="gap-1">
        <span className="text-xs">✕</span> Danger
      </Badge>
    </div>
  );
}

Status indicators

Dot-style status indicators for real-time state display.

Server Status

Online

Database Connection

Connected

API Response Time

Slow

Disk Space

Low

Service Health

Down

View source

import { Badge } from '@acronis-platform/shadcn-uikit/react';

export function BadgeStatusIndicators() {
  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between rounded-lg border p-3">
        <span className="text-sm">Server Status</span>
        <Badge variant="success">Online</Badge>
      </div>
      <div className="flex items-center justify-between rounded-lg border p-3">
        <span className="text-sm">Database Connection</span>
        <Badge variant="info">Connected</Badge>
      </div>
      <div className="flex items-center justify-between rounded-lg border p-3">
        <span className="text-sm">API Response Time</span>
        <Badge variant="warning">Slow</Badge>
      </div>
      <div className="flex items-center justify-between rounded-lg border p-3">
        <span className="text-sm">Disk Space</span>
        <Badge variant="critical">Low</Badge>
      </div>
      <div className="flex items-center justify-between rounded-lg border p-3">
        <span className="text-sm">Service Health</span>
        <Badge variant="danger">Down</Badge>
      </div>
    </div>
  );
}

Notification counts

Badges used as notification counters.

View source

import { Badge } from '@acronis-platform/shadcn-uikit/react';

export function BadgeNotificationCounts() {
  return (
    <div className="flex flex-wrap gap-6">
      <div className="relative">
        <button className="rounded-lg border p-3">Messages</button>
        <Badge
          variant="danger"
          className="absolute -right-2 -top-2 rounded-full px-2 py-0.5 text-[10px]"
        >
          5
        </Badge>
      </div>
      <div className="relative">
        <button className="rounded-lg border p-3">Notifications</button>
        <Badge
          variant="info"
          className="absolute -right-2 -top-2 rounded-full px-2 py-0.5 text-[10px]"
        >
          12
        </Badge>
      </div>
      <div className="relative">
        <button className="rounded-lg border p-3">Updates</button>
        <Badge
          variant="success"
          className="absolute -right-2 -top-2 rounded-full px-2 py-0.5 text-[10px]"
        >
          3
        </Badge>
      </div>
    </div>
  );
}

API Reference

Badge

Prop

Type

Edit on GitHub

Badge

On this page