Examples
Basic
The following example demonstrates the three variants of notification badge that are available: "read", "unread", and "attention".
The isExpanded property is also passed in to:
- set the
aria-expandedattribute on the notification badge, - apply visual styling on the notification badge, and
- to indiciate that a notification drawer is expanded, for use-cases as seen in our notification drawer react demos.
With count
You can display a number within the notification badge by passing in the count property, to indicate how many read, unread, or attention notifications there are. The isExpanded property is also passed in, similar to the notification badge basic example.
Props
NotificationBadge
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Adds an accessible label to the notification badge. | |
| attentionIcon | React.ReactNode | <AttentionBellIcon /> | Icon to display for attention variant. |
| children | React.ReactNode | Content rendered inside the notification badge. | |
| className | string | Additional classes added to the notification badge. | |
| count | number | 0 | A number displayed in the badge alongside the icon. |
| icon | React.ReactNode | <BellIcon /> | Icon to display in the notification badge. |
| isExpanded | boolean | false | Flag for applying expanded styling and setting the aria-expanded attribute on the notification badge. |
| variant | NotificationBadgeVariant | 'read' | 'unread' | 'attention' | NotificationBadgeVariant.read | Determines the variant of the notification badge. |
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
