@rhds/elements
Version:
Red Hat Design System Elements
27 lines (19 loc) • 681 B
Markdown
A badge is used to annotate other information with numerical content.
To provide context to your badge, it is highly encouraged that you also include an aria-label attribute in your markup.
```html
<rh-badge number="1" aria-label="1 new message">1</rh-badge>
```
In the example, '11' would appear as '10+' on the badge because of the threshold set at '10'.
```html
<rh-badge threshold="10" number="11">11</rh-badge>
```
This adds a background color to the badge to indicate state.
State options: 'info', 'success', 'moderate', 'important', 'critical'
```html
<rh-badge number="1" state="success">1</rh-badge>
```