Badge

Variants

12NewPassed37

import { Badge } from '@eekodigital/raster';

<Badge>12</Badge>
<Badge variant="primary">New</Badge>
<Badge variant="success">Passed</Badge>
<Badge variant="danger">3</Badge>
<Badge variant="warning">7</Badge>

In context

Badges typically appear alongside a label to communicate counts or states at a glance.

Open findings14

Pending review7

Passed controls98

Not applicable5

<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-3)' }}>
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    <span>Open findings</span>
    <Badge variant="danger">14</Badge>
  </div>
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    <span>Pending review</span>
    <Badge variant="warning">7</Badge>
  </div>
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    <span>Passed controls</span>
    <Badge variant="success">98</Badge>
  </div>
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    <span>Not applicable</span>
    <Badge>5</Badge>
  </div>
</div>

When to use

Use Badge for compact numeric counts and single-word statuses that sit inline alongside a label, nav item, or table cell — unread messages, open findings, pass/fail indicators.

Use Tag instead

for longer text labels or multi-word statuses where a pill with more breathing room is appropriate.

Props

Prop	Type	Default	Description
variant	”neutral” | “primary” | “success” | “danger” | “warning"	"neutral”	Visual intent.
className	string	—	Additional CSS classes.