Examples
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. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--BorderColor | transparent | ||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--BorderWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--BorderRadius | 999px | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--FontSize | 0.75rem | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--FontWeight | 500 | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--PaddingInlineEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--PaddingInlineStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--MinWidth | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge__toggle-icon--MarginInlineStart | 0.25rem | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge__toggle-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--m-read--BackgroundColor | (In light theme) #e0e0e0 | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--m-read--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--m-read__toggle-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--m-unread--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--m-unread--Color | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--m-unread__toggle-icon--Color | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--m-disabled--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--m-disabled--BorderColor | (In light theme) #a3a3a3 | ||
| ||||
| :where(:root, .pf-v6-c-badge) | --pf-v6-c-badge--m-disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-badge.pf-m-read | --pf-v6-c-badge--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-badge.pf-m-read | --pf-v6-c-badge--BackgroundColor | (In light theme) #e0e0e0 | ||
| ||||
| .pf-v6-c-badge.pf-m-read | --pf-v6-c-badge__toggle-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-badge.pf-m-unread | --pf-v6-c-badge--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-badge.pf-m-unread | --pf-v6-c-badge--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-badge.pf-m-unread | --pf-v6-c-badge__toggle-icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-badge.pf-m-disabled | --pf-v6-c-badge--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-badge.pf-m-disabled | --pf-v6-c-badge--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
