# React Bootstrap Badge

React Bootstrap badge markup for AdminKit: theme and light colors, pill badges, counters in buttons and a status badge picked from your data.

Use a badge for a short label or a number next to something else: the status of a payment, or the count of unread messages on a button. A badge is a `<span>` with Bootstrap's `.badge` class and a background color.

In [AdminKit for React](/react/) you write badges in JSX with `className`. There is no badge component. Badges are part of the free and PRO versions.

## Example

```html
<span class="badge bg-primary me-1">Primary</span>
<span class="badge bg-secondary me-1">Secondary</span>
<span class="badge bg-success me-1">Success</span>
<span class="badge bg-danger me-1">Danger</span>
<span class="badge bg-warning me-1">Warning</span>
<span class="badge bg-info">Info</span>
```
```tsx code
<span className="badge bg-primary me-1">Primary</span>
<span className="badge bg-secondary me-1">Secondary</span>
<span className="badge bg-success me-1">Success</span>
<span className="badge bg-danger me-1">Danger</span>
<span className="badge bg-warning me-1">Warning</span>
<span className="badge bg-info">Info</span>
```

A badge's font size is 80% of its parent's, so a badge in a heading grows with the heading.

## Classes

| Class | Effect |
| --- | --- |
| `badge` | The base class |
| `bg-<color>` | A filled badge in a theme color: `bg-primary`, `bg-success`, ... |
| `badge-<color>-light` | AdminKit: a 15% tint of the color with darker text, such as `badge-success-light` |
| `rounded-pill` | Fully rounded ends |
| `text-bg-<color>` | Bootstrap's background with a matching text color |

## Light and pill badges

Light badges are quieter than filled ones, which helps when a list or a table shows many of them. AdminKit adds them in `src/scss/3-components/_badges.scss`. They keep a 4.5:1 contrast between the text and the tint, in light and dark mode. The account pages of AdminKit PRO use them for statuses such as "Invited".

```html
<span class="badge badge-primary-light me-1">Draft</span>
<span class="badge badge-success-light me-1">Active</span>
<span class="badge badge-warning-light me-1">Invited</span>
<span class="badge bg-primary rounded-pill me-1">14</span>
<span class="badge bg-danger rounded-pill">99+</span>
```
```tsx code
<span className="badge badge-primary-light me-1">Draft</span>
<span className="badge badge-success-light me-1">Active</span>
<span className="badge badge-warning-light me-1">Invited</span>
<span className="badge bg-primary rounded-pill me-1">14</span>
<span className="badge bg-danger rounded-pill">99+</span>
```

## Badge from data

When the status comes from your data, such as whether a payment is paid or failed, let the data pick the color. Map each status to a color in an object, and build the class name from it:

```tsx
type Status = "paid" | "pending" | "failed";

const statusColors: Record<Status, string> = {
  paid: "success",
  pending: "warning",
  failed: "danger",
};

export function StatusBadge({ status }: { status: Status }) {
  return (
    <span className={`badge badge-${statusColors[status]}-light text-capitalize`}>
      {status}
    </span>
  );
}
```

## Counters

A counter tells the user how many things are waiting, such as unread messages. Put it in a button or a link, and show a number from state. Render it only when there is something to count. Add a visually hidden text that says what the number means:

```html
<button type="button" class="btn btn-primary me-3">
  Notifications <span class="badge bg-light text-dark ms-1">4</span>
</button>
<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    12
    <span class="visually-hidden">unread messages</span>
  </span>
</button>
```
```tsx code
export function InboxButton({ unread }: { unread: number }) {
  return (
    <button type="button" className="btn btn-primary position-relative">
      Inbox
      {unread > 0 && (
        <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
          {unread > 99 ? "99+" : unread}
          <span className="visually-hidden">unread messages</span>
        </span>
      )}
    </button>
  );
}
```

## Accessibility

- Screen readers read only the badge's text. A bare number such as "12" needs context: add a `visually-hidden` text, as in the counter above, or an `aria-label` on the button.
- Do not rely on the color alone for a status. Keep a word in the badge, such as "Failed", not only a red dot.
- A badge that changes while the user is on the page, such as a counter, is not announced. Use a [toast](/react/docs/components/toasts/) or an `aria-live` region for updates the user must hear.

## Related

- [Next.js Bootstrap badge](/nextjs/docs/components/badge/): the same markup in AdminKit for Next.js
- [Bootstrap 5 badges](/bootstrap/docs/components/badge/): the badges of the HTML version
- [List group](/react/docs/components/list-group/): badges as counters in a list
- [General UI demo](https://react-demo.adminkit.io/ui-general)

---

Canonical HTML page: https://adminkit.io/react/docs/components/badge/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io