Badge

Small status indicators and labels for highlighting important information or categorizing content.

Import

import { Badge } from '@akitectio/aki-ui'

Basic Usage

DefaultPrimarySecondarySuccessWarningError
<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>

Sizes

SmallDefaultLarge
<Badge small variant="primary">Small</Badge>
<Badge variant="primary">Default</Badge>
<Badge variant="primary" className="text-sm px-3 py-1">Large</Badge>

With Icons

VerifiedPendingFailed
<Badge variant="success" className="inline-flex items-center gap-1">
  <CheckIcon className="w-3 h-3" />
  Verified
</Badge>
<Badge variant="warning" className="inline-flex items-center gap-1">
  <ExclamationIcon className="w-3 h-3" />
  Pending
</Badge>
<Badge variant="error" className="inline-flex items-center gap-1">
  <XIcon className="w-3 h-3" />
  Failed
</Badge>

Use Cases

Status Indicators

Order #12345Delivered
Order #12346Processing
Order #12347Cancelled

Category Tags

ReactTypeScriptNext.jsTailwindDesign System

Notification Counts

Dismissible Badges

FrontendBackend
<Badge variant="primary" className="inline-flex items-center gap-1">
  Frontend
  <button 
    onClick={() => removeBadge('frontend')}
    className="ml-1 hover:bg-blue-700 rounded-full p-0.5"
  >
    <XIcon className="w-3 h-3" />
  </button>
</Badge>

API Reference

PropTypeDefaultDescription
variant'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error''default'Visual style variant
size'sm' | 'md' | 'lg''md'Badge size
classNamestring-Additional CSS classes
childrenReactNode-Badge content

Best Practices

Do's

  • • Use consistent color coding across your application
  • • Keep badge text short and meaningful
  • • Use appropriate variants for different states
  • • Consider accessibility when choosing colors
  • • Group related badges together

Don'ts

  • • Don't use too many different badge variants in one view
  • • Avoid long text in badges
  • • Don't use badges as primary navigation elements
  • • Don't rely solely on color to convey meaning

Accessibility

The Badge component is designed with accessibility in mind:

  • • Sufficient color contrast for all variants
  • • Screen reader friendly text content
  • • Supports aria-label for additional context
  • • Interactive badges support keyboard navigation
  • • Semantic meaning conveyed through text, not just color