# Badge

> A compact label for status, counts, or categories

Status: stable. Added in Components 2.0.0. Updated in Components 2.13.0, 22 Sept 2026.

A compact label for status, counts, or categories.

## Import

```tsx
import { Badge } from '@oztix/roadie-components'
```

## Examples

### Default

```tsx
<Badge>Badge</Badge>
```

### Emphasis

```tsx
<Badge emphasis='strong'>Strong</Badge>
<Badge emphasis='normal'>Normal</Badge>
<Badge emphasis='subtle'>Subtle</Badge>
<Badge emphasis='subtler'>Subtler</Badge>
```

### Sizes

```tsx
<Badge size='sm'>Small</Badge>
<Badge size='md'>Medium</Badge>
```

### Intents

```tsx
<Badge intent='neutral'>Neutral</Badge>
<Badge intent='accent'>Accent</Badge>
<Badge intent='brand'>Brand</Badge>
<Badge intent='info'>Info</Badge>
<Badge intent='success'>Success</Badge>
<Badge intent='warning'>Warning</Badge>
<Badge intent='danger'>Danger</Badge>
```

### With indicator

Use the `indicator` prop to show a dot before the text. Add `indicatorPulse` for a slow pulse animation.

```tsx
<Badge indicator intent='success'>Active</Badge>
<Badge indicator indicatorPulse intent='danger'>Live</Badge>
<Badge indicator intent='info'>Processing</Badge>
<Badge indicator indicatorPulse intent='warning'>Attention</Badge>
```

### Hidden label

Use `hideLabel` to shrink the badge to just its dot. The badge's own surface is the dot, so `intent` and `emphasis` set its look, `size` sets its size, and `indicatorPulse` pulses it. The label stays in the DOM, visually hidden, so screen readers still announce it. Position the dot from its container; the badge has no placement prop.

```tsx
<Badge hideLabel intent='danger' emphasis='strong'>3 unread</Badge>
<Badge hideLabel indicatorPulse intent='success' emphasis='strong'>Live</Badge>
<Badge hideLabel intent='accent' emphasis='subtle'>New</Badge>
<Badge hideLabel size='sm' emphasis='normal'>Draft</Badge>
<span className='relative inline-grid'>
  <IconButton aria-label='Notifications'>
    <BellRingingIcon weight='bold' className='size-5' />
  </IconButton>
  <Badge hideLabel intent='danger' emphasis='strong' className='absolute inset-e-1 top-1'>
    3 unread
  </Badge>
</span>
```

### With icons

Place icons directly as children. SVGs are automatically sized to match the text.

```tsx
<Badge intent='success'><CheckCircle weight='bold' /> Verified</Badge>
<Badge intent='danger'><XCircle weight='bold' /> Failed</Badge>
<Badge intent='info'><Info weight='bold' /> Info</Badge>
<Badge intent='warning'><Warning weight='bold' /> Caution</Badge>
```

## Guidelines

Use `hideLabel` only where space is tight and the surrounding context explains the dot, like the corner of a collapsed nav tile. The hidden label is what a screen reader hears, so it must still describe the state, such as "3 unread", not "3".

## API reference

### Badge

```tsx
import { Badge } from '@oztix/roadie-components/badge'
```

- `indicator`: `boolean`. Show a dot indicator before the text
- `indicatorPulse`: `boolean`. Animate the indicator with a slow pulse
- `hideLabel`: `boolean`. Defaults to `false`. Show only a dot; the label stays announced, so it must describe the state.
- `intent`: `"neutral" | "brand" | "brand-secondary" | "brand-blue" | "brand-orange" | "brand-purple" | "accent" | "danger" | "success" | "warning" | "info" | null`.
- `emphasis`: `"strong" | "normal" | "subtle" | "subtler" | null`.
- `size`: `"sm" | "md" | null`.

Docs updated 24 Oct 2026.