Examples
Documentation
Overview
Always add a modifier class. Never use the class .pf-v5-c-badge on its own.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-badge | <span> | Initiates a badge. Always use with a modifier class. |
.pf-m-read | .pf-v5-c-badge | Applies read badge styling. |
.pf-m-unread | .pf-v5-c-badge | Applies unread badge styling. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-badge | --pf-v5-c-badge--BorderRadius | 30em | ||
--pf-v5-c-badge--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em | ||||
| .pf-v5-c-badge | --pf-v5-c-badge--FontSize | 0.75rem | ||
--pf-v5-c-badge--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-badge | --pf-v5-c-badge--FontWeight | 700 | ||
--pf-v5-c-badge--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-badge | --pf-v5-c-badge--PaddingRight | 0.5rem | ||
--pf-v5-c-badge--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-badge | --pf-v5-c-badge--PaddingLeft | 0.5rem | ||
--pf-v5-c-badge--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-badge | --pf-v5-c-badge--Color | #151515 | ||
--pf-v5-c-badge--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-badge | --pf-v5-c-badge--MinWidth | 2rem | ||
--pf-v5-c-badge--MinWidth --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-badge | --pf-v5-c-badge--m-read--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-badge--m-read--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-badge | --pf-v5-c-badge--m-read--Color | #151515 | ||
--pf-v5-c-badge--m-read--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-badge | --pf-v5-c-badge--m-unread--BackgroundColor | #06c | ||
--pf-v5-c-badge--m-unread--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-badge | --pf-v5-c-badge--m-unread--Color | #fff | ||
--pf-v5-c-badge--m-unread--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-badge.pf-m-read | --pf-v5-c-badge--Color | #151515 | ||
--pf-v5-c-badge--Color --pf-v5-c-badge--m-read--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-badge.pf-m-read | --pf-v5-c-badge--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-badge--BackgroundColor --pf-v5-c-badge--m-read--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-badge.pf-m-unread | --pf-v5-c-badge--Color | #fff | ||
--pf-v5-c-badge--Color --pf-v5-c-badge--m-unread--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-badge.pf-m-unread | --pf-v5-c-badge--BackgroundColor | #06c | ||
--pf-v5-c-badge--BackgroundColor --pf-v5-c-badge--m-unread--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
View source on GitHub
