## Examples

### Read


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Unread


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Disabled


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

## Documentation

### Overview

Always add a modifier class. Never use the class `.pf-v6-c-badge` on its own.

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
| `.pf-m-read` | `.pf-v6-c-badge` | Applies read badge styling. |
| `.pf-m-unread` | `.pf-v6-c-badge` | Applies unread badge styling. |
| `.pf-m-disabled` | `.pf-v6-c-badge` | Applies disabled badge styling. For use when a badge is used in a disabled element. |