package.docs.components.Badge.examples.Badge.md Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation

Assets, source, tooling, and content for PatternFly 4

The newest version!

---
id: Badge
section: components
cssPrefix: pf-v6-c-badge
---## Examples

### Read

```html
7
24
240
999+

```

### Unread

```html

  7
  unread messages


  24
  unread messages


  240
  unread messages


  999+
  unread messages


```

### Disabled

```html
7
24
240
999+

```

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