Badge
Small status indicator with color variants, pill shape, and pulse animation.
<rhx-badge>
Examples
Variants
Neutral
Brand
Success
Warning
Danger
<rhx-badge rhx-variant="neutral">Neutral</rhx-badge>
<rhx-badge rhx-variant="brand">Brand</rhx-badge>
<rhx-badge rhx-variant="success">Success</rhx-badge>
<rhx-badge rhx-variant="warning">Warning</rhx-badge>
<rhx-badge rhx-variant="danger">Danger</rhx-badge>Pill Shape
12
New
Active
3
<rhx-badge rhx-variant="neutral" rhx-pill="true">12</rhx-badge>
<rhx-badge rhx-variant="brand" rhx-pill="true">New</rhx-badge>
<rhx-badge rhx-variant="success" rhx-pill="true">Active</rhx-badge>
<rhx-badge rhx-variant="danger" rhx-pill="true">3</rhx-badge>Pulse Animation
3
Live
Online
<rhx-badge rhx-variant="danger" rhx-pulse="true">3</rhx-badge>
<rhx-badge rhx-variant="brand" rhx-pulse="true">Live</rhx-badge>
<rhx-badge rhx-variant="success" rhx-pill="true"
rhx-pulse="true">Online</rhx-badge>Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-variant |
string |
neutral |
Color variant: neutral, brand, success, warning, danger |
rhx-pill |
bool |
false |
Renders with fully rounded corners |
rhx-pulse |
bool |
false |
Adds a pulsing animation |
Accessibility
- Use
aria-labelwhen the badge content is not self-explanatory (e.g., a number without context). - Decorative badges that duplicate adjacent text should use
aria-hidden="true". - Pulse animation is purely visual and does not affect screen reader output.
- Color is supplemented by text content so meaning is not conveyed by color alone.