Badge

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

Import

import { Badge } from '@nostromo/ui-core'
// or
import { Badge } from '@nostromo/ui-core/badge'

Usage

import { Badge } from '@nostromo/ui-core'
 
export default function Example() {
  return (
    <Badge variant="default">Active</Badge>
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { Badge } from '@nostromo/ui-core' export default function BadgeDefault() { return <Badge>Active</Badge> }...

Live Example

☀️

Copy

Storybook →

View Code

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

With Icons

Live Example

☀️

Copy

Storybook →

View Code

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	Required	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "success" \| "warning" \| "info"`	`"default"`	No	Visual variant of the badge
`size`	`"sm" \| "default" \| "lg"`	`"default"`	No	Size of the badge
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Badge content

Standard HTML Props

The Badge component extends React.HTMLAttributes<HTMLDivElement>, so it accepts all standard HTML div attributes (e.g., id, data-*, aria-*).

Button Icon