Examples
Documentation
Overview
Always add a modifier class. Never use the class .pf-c-notification-badge on its own. This component is designed to be used within a dark component such as the masthead.
Note: The page component currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.
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-c-notification-badge | <div> | Initiates a notification badge. Always use it with a modifier class. |
.pf-c-notification-badge__count | <span> | Initiates a notification badge count. |
.pf-m-read | .pf-c-notification-badge | Applies read notification badge styling. |
.pf-m-unread | .pf-c-notification-badge | Applies unread notification badge styling. |
.pf-m-attention | .pf-c-notification-badge | Applies attention notification badge styling. |
CSS variables
| .pf-c-notification-badge | --pf-c-notification-badge--PaddingTop | 0.375rem | ||
| .pf-c-notification-badge | --pf-c-notification-badge--PaddingRight | 1rem | ||
| .pf-c-notification-badge | --pf-c-notification-badge--PaddingBottom | 0.375rem | ||
| .pf-c-notification-badge | --pf-c-notification-badge--PaddingLeft | 1rem | ||
| .pf-c-notification-badge | --pf-c-notification-badge--MarginTop | calc(-1 * 0.375rem) | ||
| .pf-c-notification-badge | --pf-c-notification-badge--MarginRight | calc(-1 * 1rem) | ||
| .pf-c-notification-badge | --pf-c-notification-badge--MarginBottom | calc(-1 * 0.375rem) | ||
| .pf-c-notification-badge | --pf-c-notification-badge--MarginLeft | calc(-1 * 1rem) | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--BorderColor | transparent | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--BorderRadius | 3px | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--BorderWidth | 0 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--Top | 0 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--Right | 0 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--Width | auto | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--Height | auto | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--BackgroundColor | transparent | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--TranslateX | 0 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--TranslateY | 0 | ||
| .pf-c-notification-badge | --pf-c-notification-badge__i--Width | auto | ||
| .pf-c-notification-badge | --pf-c-notification-badge__i--Height | auto | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-read--after--BorderColor | transparent | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-read--after--BackgroundColor | transparent | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-unread--Color | #fff | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-unread--after--BackgroundColor | #06c | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-unread--hover--after--BackgroundColor | #004080 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-attention--Color | #fff | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-attention--after--BackgroundColor | #c9190b | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-attention--hover--after--BackgroundColor | #a30000 | ||
| .pf-c-notification-badge | --pf-c-notification-badge__count--MarginLeft | 0.25rem | ||
| .pf-c-notification-badge | --pf-c-notification-badge--pf-icon-attention-bell--LineHeight | 1.3 | ||
| .pf-c-notification-badge.pf-m-read | --pf-c-notification-badge--after--BackgroundColor | transparent | ||
| .pf-c-notification-badge.pf-m-read | --pf-c-notification-badge--after--BorderColor | transparent | ||
| .pf-c-notification-badge.pf-m-unread | --pf-c-notification-badge--after--BackgroundColor | #06c | ||
| .pf-c-notification-badge.pf-m-unread:hover | --pf-c-notification-badge--after--BackgroundColor | #004080 | ||
| .pf-c-notification-badge.pf-m-attention | --pf-c-notification-badge--after--BackgroundColor | #c9190b | ||
| .pf-c-notification-badge.pf-m-attention:hover | --pf-c-notification-badge--after--BackgroundColor | #a30000 | ||
View source on GitHub
