React Bootstrap Badge

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 you write badges in JSX with className. There is no badge component. Badges are part of the free and PRO versions.

ExampleCopy Anchor Link

<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.

ClassesCopy Anchor Link

Light and pill badgesCopy Anchor Link

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".

<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 dataCopy Anchor Link

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:

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>
  );
}

CountersCopy Anchor Link

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:

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>
  );
}

AccessibilityCopy Anchor Link

• 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 or an aria-live region for updates the user must hear.

RelatedCopy Anchor Link

• Next.js Bootstrap badge: the same markup in AdminKit for Next.js
• Bootstrap 5 badges: the badges of the HTML version
• List group: badges as counters in a list
• General UI demo