Examples
Props
Badge
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | '' | content rendered inside the Badge |
| className | string | '' | additional classes added to the Badge |
| isRead | boolean | false | Adds styling to the badge to indicate it has been read |
| screenReaderText | string | Text announced by screen readers to indicate the current content/status of the badge. |
CSS variables
| 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