Examples
Documentation
Overview
Always add a modifier class to indicate read, unread, or attention state. Never use the class .pf-v5-c-notification-badge on its own. This component is designed to be used within a dark component such as the masthead.
Accessibility
Be sure that the component associated with this indicator handles screen reader text indicating read or unread notifications.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-notification-badge | <div> | Initiates a notification badge. Always use it with a modifier class. |
.pf-v5-c-notification-badge__count | <span> | Initiates a notification badge count. |
.pf-m-read | .pf-v5-c-notification-badge | Applies read notification badge styling. |
.pf-m-unread | .pf-v5-c-notification-badge | Applies unread notification badge styling. |
.pf-m-attention | .pf-v5-c-notification-badge | Applies attention notification badge styling. |
.pf-m-expanded | .pf-v5-c-notification-badge | Applies expanded notification badge styling. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--PaddingTop | 0.375rem | ||
--pf-v5-c-notification-badge--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--PaddingRight | 1rem | ||
--pf-v5-c-notification-badge--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--PaddingBottom | 0.375rem | ||
--pf-v5-c-notification-badge--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--PaddingLeft | 1rem | ||
--pf-v5-c-notification-badge--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--MarginTop | calc(-1 * 0.375rem) | ||
--pf-v5-c-notification-badge--MarginTop calc(-1 * --pf-v5-global--spacer--form-element) calc(-1 * $pf-v5-global--spacer--form-element) calc(-1 * pf-size-prem(6px)) calc(-1 * 0.375rem) | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--MarginRight | calc(-1 * 1rem) | ||
--pf-v5-c-notification-badge--MarginRight calc(-1 * --pf-v5-global--spacer--md) calc(-1 * $pf-v5-global--spacer--md) calc(-1 * pf-size-prem(16px)) calc(-1 * 1rem) | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--MarginBottom | calc(-1 * 0.375rem) | ||
--pf-v5-c-notification-badge--MarginBottom calc(-1 * --pf-v5-global--spacer--form-element) calc(-1 * $pf-v5-global--spacer--form-element) calc(-1 * pf-size-prem(6px)) calc(-1 * 0.375rem) | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--MarginLeft | calc(-1 * 1rem) | ||
--pf-v5-c-notification-badge--MarginLeft calc(-1 * --pf-v5-global--spacer--md) calc(-1 * $pf-v5-global--spacer--md) calc(-1 * pf-size-prem(16px)) calc(-1 * 1rem) | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--after--BorderColor | transparent | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--after--BorderRadius | 3px | ||
--pf-v5-c-notification-badge--after--BorderRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--after--BorderWidth | 0 | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--after--Top | 0 | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--after--Right | 0 | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--after--Width | auto | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--after--Height | auto | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--after--BackgroundColor | transparent | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--after--TranslateX | 0 | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--after--TranslateY | 0 | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge__i--Width | auto | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge__i--Height | auto | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--m-read--after--BorderColor | transparent | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--m-read--after--BackgroundColor | transparent | ||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor | #3c3f42 | ||
--pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor --pf-v5-global--BackgroundColor--dark-200 $pf-v5-global--BackgroundColor--dark-200 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--m-unread--Color | #fff | ||
--pf-v5-c-notification-badge--m-unread--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--m-unread--after--BackgroundColor | #06c | ||
--pf-v5-c-notification-badge--m-unread--after--BackgroundColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor | #004080 | ||
--pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor | #004080 | ||
--pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--m-attention--Color | #fff | ||
--pf-v5-c-notification-badge--m-attention--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--m-attention--after--BackgroundColor | #c9190b | ||
--pf-v5-c-notification-badge--m-attention--after--BackgroundColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor | #a30000 | ||
--pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor | #a30000 | ||
--pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge__count--MarginLeft | 0.25rem | ||
--pf-v5-c-notification-badge__count--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-notification-badge | --pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight | 1.3 | ||
--pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight --pf-v5-global--LineHeight--sm $pf-v5-global--LineHeight--sm 1.3 | ||||
| .pf-v5-c-notification-badge.pf-m-read | --pf-v5-c-notification-badge--after--BackgroundColor | transparent | ||
--pf-v5-c-notification-badge--after--BackgroundColor --pf-v5-c-notification-badge--m-read--after--BackgroundColor transparent | ||||
| .pf-v5-c-notification-badge.pf-m-read | --pf-v5-c-notification-badge--after--BorderColor | transparent | ||
--pf-v5-c-notification-badge--after--BorderColor --pf-v5-c-notification-badge--m-read--after--BorderColor transparent | ||||
| .pf-v5-c-notification-badge.pf-m-unread | --pf-v5-c-notification-badge--after--BackgroundColor | #06c | ||
--pf-v5-c-notification-badge--after--BackgroundColor --pf-v5-c-notification-badge--m-unread--after--BackgroundColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-notification-badge.pf-m-unread:hover | --pf-v5-c-notification-badge--after--BackgroundColor | #004080 | ||
--pf-v5-c-notification-badge--after--BackgroundColor --pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-notification-badge.pf-m-attention | --pf-v5-c-notification-badge--after--BackgroundColor | #c9190b | ||
--pf-v5-c-notification-badge--after--BackgroundColor --pf-v5-c-notification-badge--m-attention--after--BackgroundColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-notification-badge.pf-m-attention:hover | --pf-v5-c-notification-badge--m-attention--after--BackgroundColor | #a30000 | ||
--pf-v5-c-notification-badge--m-attention--after--BackgroundColor --pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-notification-badge.pf-m-expanded | --pf-v5-c-notification-badge--m-read--Color | #fff | ||
--pf-v5-c-notification-badge--m-read--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-notification-badge.pf-m-expanded | --pf-v5-c-notification-badge--m-read--after--BackgroundColor | #3c3f42 | ||
--pf-v5-c-notification-badge--m-read--after--BackgroundColor --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor --pf-v5-global--BackgroundColor--dark-200 $pf-v5-global--BackgroundColor--dark-200 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-notification-badge.pf-m-expanded | --pf-v5-c-notification-badge--m-unread--after--BackgroundColor | #004080 | ||
--pf-v5-c-notification-badge--m-unread--after--BackgroundColor --pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-notification-badge.pf-m-expanded | --pf-v5-c-notification-badge--m-attention--after--BackgroundColor | #a30000 | ||
--pf-v5-c-notification-badge--m-attention--after--BackgroundColor --pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
View source on GitHub
