Badge

A badge provides a small numeric count on a pill for labels, filters, or lists. Set state when the count carries severity:

• neutral - Indicates generic information or a message with no severity.
• danger - Indicates a danger state, like an error that is blocking a user from completing a task.
• warning - Indicates a warning state, like a non-blocking error that might need to be fixed.
• caution - Indicates an action or notice which should immediately draw the attention
• info - Indicates helpful information or a message with very little to no severity.
• success - Indicates a success state, like if a process was completed without errors.

It must not take focus or act as a control; it has no implicit ARIA role. Provide context in surrounding text. Avoid color-only meaning (WCAG 1.4.1). Use threshold with number for values like 999+.

import '@rhds/elements/rh-badge/rh-badge.js';

<rh-badge number="7">7</rh-badge>

import { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Badge number="7">7</Badge>
);

• When you need to reflect counts like number of objects, events, or unread items