Badge

The Badge component provides you with status badges and labels for your application.

Live Examples

Storybook: components-badge--default

Storybook: components-badge--all-variants

Storybook: components-badge--with-icons

Code Examples

import { Badge } from '@nostromo/ui-core'
 
export default function BadgeExamples() {
  return (
    <div className="space-x-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  )
}

With Icons

import { Badge } from '@nostromo/ui-core'
 
export default function BadgeWithIcons() {
  return (
    <div className="space-x-2">
      <Badge variant="default">✓ Active</Badge>
      <Badge variant="destructive">✗ Inactive</Badge>
      <Badge variant="secondary">⏳ Pending</Badge>
    </div>
  )
}

Accessibility

Semantic HTML

Badge: Uses semantic <span> element for inline badges
Screen reader support: Badge content is announced by screen readers
Color contrast: All variants meet WCAG 2.1 AA contrast requirements

Usage Guidelines

Status indicators: Use for status, state, or category labels
Short text: Keep badge text concise and descriptive
Color coding: Use consistent colors for similar statuses

Examples

// Accessible status badges
<Badge variant="default" aria-label="Status: Active">Active</Badge>
<Badge variant="destructive" aria-label="Status: Error">Error</Badge>
<Badge variant="secondary" aria-label="Status: Pending">Pending</Badge>
 
// With icons for better visual clarity
<Badge variant="default">
  <span aria-hidden="true">✓</span>
  <span className="sr-only">Status: </span>
  Active
</Badge>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline"`	`"default"`	Badge variant
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Badge size

Button Icon