Notification drawer

A notification drawer is a place where users can view and manage notifications that are generated by the system. It allows them to see a list of notifications without the need to navigate away from the current screen.

Examples

Basic

Info notification:Unread info notification title
This is an info notification description.
5 minutes ago
Danger notification:Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
10 minutes ago
Danger notification:Unread danger notification title. This is a long title to show how the title will be truncated if it is long and will be shown in a single line.
This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
10 minutes ago
Warning notification:Read warning notification title
This is a warning notification description.
20 minutes ago
Success notification:Read success notification title
This is a success notification description.
30 minutes ago
notification:Read (default) notification title
This is a default notification description.
35 minutes ago

Groups

Info notification:Unread info notification title
This is an info notification description.
5 minutes ago
Danger notification:Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
10 minutes ago
Warning notification:Read warning notification title
This is a warning notification description.
20 minutes ago
Success notification:Read success notification title
This is a success notification description.
30 minutes ago

Lightweight

Info notification:Info notification title w/action
This is an info notification description.
5 minutes ago
Danger notification:Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
10 minutes ago
Warning notification:Warning notification title
This is a warning notification description.
20 minutes ago
Success notification:Success notification title
This is a success notification description.
30 minutes ago

Props

NotificationDrawer

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the notification drawer
className	string		Additional classes added to the notification drawer

NotificationDrawerBody

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the body of the notification drawer
className	string	''	Additional classes added to the notification drawer body

NotificationDrawerHeader

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the drawer
className	string	''	Additional classes for notification drawer header.
closeButtonAriaLabel	string	'Close'	Adds custom accessible text to the notification drawer close button.
count	number		Notification drawer heading count
customText	string		Notification drawer heading custom text which can be used instead of providing count/unreadText
onClose	() => void		Callback for when close button is clicked
title	string	'Notifications'	Notification drawer heading title
unreadText	string	'unread'	Notification drawer heading unread text used in combination with a count

NotificationDrawerGroup

*required
Name	Type	Default	Description
countrequired	number		Notification drawer group count
isExpandedrequired	boolean		Adds styling to the group to indicate expanded state
titlerequired	string \| React.ReactNode		Notification drawer group title
children	React.ReactNode		Content rendered inside the group
className	string	''	Additional classes added to the group
headingLevel	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	'h1'	Sets the heading level to use for the group title. Default is h1.
isRead	boolean	false	Adds styling to the group to indicate whether it has been read
onExpand	(event: any, value: boolean) => void	(event: any, expanded: boolean) => undefined as any	Callback for when group button is clicked to expand
tooltipPosition	TooltipPosition \| 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'		Position of the tooltip which is displayed if text is truncated
truncateTitle	number	0	Truncate title to number of lines

NotificationDrawerGroupList

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the notification drawer list body
className	string	''	Additional classes added to the notification drawer list body

NotificationDrawerList

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the notification drawer list body
className	string	''	Additional classes added to the notification drawer list body
isHidden	boolean	false	Adds styling to the notification drawer list to indicate expand/hide state

NotificationDrawerListItem

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the list item
className	string	''	Additional classes added to the list item
isHoverable	boolean	true	Modifies the list item to include hover styles on :hover
isRead	boolean	false	Adds styling to the list item to indicate it has been read
onClick	(event: any) => void	(event: React.MouseEvent) => undefined as any	Callback for when a list item is clicked
tabIndex	number	0	Tab index for the list item
variant	'default' \| 'success' \| 'danger' \| 'warning' \| 'info'	'default'	Variant indicates the severity level

NotificationDrawerListItemBody

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the list item body
className	string	''	Additional classes added to the list item body
timestamp	React.ReactNode		List item timestamp

NotificationDrawerListItemHeader

*required
Name	Type	Default	Description
titlerequired	string		Notification drawer list item title
children	React.ReactNode		Actions rendered inside the notification drawer list item header
className	string	''	Additional classes for notification drawer list item header.
headingLevel	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	'h2'	Sets the heading level to use for the list item header title. Default is h2.
icon	React.ReactNode	null	Add custom icon for notification drawer list item header
srTitle	string		Notification drawer list item header screen reader title
tooltipPosition	TooltipPosition \| 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'		Position of the tooltip which is displayed if text is truncated
truncateTitle	number	0	Truncate title to number of lines
variant	'success' \| 'danger' \| 'warning' \| 'info' \| 'default'	'default'	Variant indicates the severity level

CSS variables


	.pf-c-notification-drawer	--pf-c-notification-drawer--BackgroundColor	#f0f0f0
--pf-c-notification-drawer--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-notification-drawer	--pf-c-notification-drawer__header--PaddingTop	1rem
--pf-c-notification-drawer__header--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__header--PaddingRight	1rem
--pf-c-notification-drawer__header--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__header--PaddingBottom	1rem
--pf-c-notification-drawer__header--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__header--PaddingLeft	1rem
--pf-c-notification-drawer__header--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__header--BackgroundColor	#fff
--pf-c-notification-drawer__header--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-notification-drawer	--pf-c-notification-drawer__header--BoxShadow	0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-notification-drawer__header--BoxShadow --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-notification-drawer	--pf-c-notification-drawer__header--ZIndex	200
--pf-c-notification-drawer__header--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-notification-drawer	--pf-c-notification-drawer__header-title--FontSize	1.25rem
--pf-c-notification-drawer__header-title--FontSize --pf-global--FontSize--xl $pf-global--FontSize--xl pf-font-prem(20px) 1.25rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__header-status--MarginLeft	1rem
--pf-c-notification-drawer__header-status--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__body--ZIndex	100
--pf-c-notification-drawer__body--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--PaddingTop	1rem
--pf-c-notification-drawer__list-item--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--PaddingRight	1rem
--pf-c-notification-drawer__list-item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--PaddingBottom	1rem
--pf-c-notification-drawer__list-item--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--PaddingLeft	1rem
--pf-c-notification-drawer__list-item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--BackgroundColor	#fff
--pf-c-notification-drawer__list-item--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--BoxShadow	inset 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-notification-drawer__list-item--BoxShadow inset --pf-global--BoxShadow--sm-bottom inset $pf-global--BoxShadow--sm-bottom inset 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) inset 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) inset 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--BorderBottomWidth	1px
--pf-c-notification-drawer__list-item--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--BorderBottomColor	transparent
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--OutlineOffset	-0.25rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--before--Width	3px
--pf-c-notification-drawer__list-item--before--Width --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--before--Top	0
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--before--Bottom	calc(1px * -1)
--pf-c-notification-drawer__list-item--before--Bottom calc(--pf-c-notification-drawer__list-item--BorderBottomWidth * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color	#2b9af3
--pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color --pf-global--info-color--100 $pf-global--info-color--100 $pf-color-blue-300 #2b9af3
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor	#2b9af3
--pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor --pf-global--info-color--100 $pf-global--info-color--100 $pf-color-blue-300 #2b9af3
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color	#f0ab00
--pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor	#f0ab00
--pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color	#c9190b
--pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor	#c9190b
--pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color	#3e8635
--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor	#3e8635
--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color	#009596
--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color --pf-global--default-color--200 $pf-global--default-color--200 $pf-color-cyan-300 #009596
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor	#009596
--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor --pf-global--default-color--200 $pf-global--default-color--200 $pf-color-cyan-300 #009596
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-read--BackgroundColor	#f0f0f0
--pf-c-notification-drawer__list-item--m-read--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-read--BorderBottomColor	#d2d2d2
--pf-c-notification-drawer__list-item--m-read--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-read--before--Top	calc(1px * -1)
--pf-c-notification-drawer__list-item--m-read--before--Top calc(--pf-c-notification-drawer__list-item--BorderBottomWidth * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-read--before--Bottom	0
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-read--before--BackgroundColor	transparent
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--list-item--m-read--before--Top	0
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow	inset 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow inset --pf-global--BoxShadow--sm-bottom inset $pf-global--BoxShadow--sm-bottom inset 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) inset 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) inset 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex	100
--pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow	0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18), 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
--pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow --pf-global--BoxShadow--md-top, --pf-global--BoxShadow--md-bottom $pf-global--BoxShadow--md-top, $pf-global--BoxShadow--md-bottom 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18), 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba(#030303, .18), 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba(#030303, .18) 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18), 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item-header--MarginBottom	0.25rem
--pf-c-notification-drawer__list-item-header--MarginBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item-header-icon--Color	inherit
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item-header-icon--MarginRight	0.5rem
--pf-c-notification-drawer__list-item-header-icon--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item-header-title--FontWeight	700
--pf-c-notification-drawer__list-item-header-title--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 700
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item-header-title--max-lines	1
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight	400
--pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item-description--MarginBottom	0.5rem
--pf-c-notification-drawer__list-item-description--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item-timestamp--Color	#6a6e73
--pf-c-notification-drawer__list-item-timestamp--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-notification-drawer	--pf-c-notification-drawer__list-item-timestamp--FontSize	0.875rem
--pf-c-notification-drawer__list-item-timestamp--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth	1px
--pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-notification-drawer	--pf-c-notification-drawer__group--m-expanded--group--BorderTopColor	#d2d2d2
--pf-c-notification-drawer__group--m-expanded--group--BorderTopColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-notification-drawer	--pf-c-notification-drawer__group--m-expanded--MinHeight	0
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle--PaddingTop	1rem
--pf-c-notification-drawer__group-toggle--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle--PaddingRight	1rem
--pf-c-notification-drawer__group-toggle--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle--PaddingBottom	1rem
--pf-c-notification-drawer__group-toggle--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle--PaddingLeft	1rem
--pf-c-notification-drawer__group-toggle--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle--BackgroundColor	#fff
--pf-c-notification-drawer__group-toggle--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle--BorderColor	#d2d2d2
--pf-c-notification-drawer__group-toggle--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle--BorderBottomWidth	1px
--pf-c-notification-drawer__group-toggle--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle--OutlineOffset	-0.25rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle-title--MarginRight	1rem
--pf-c-notification-drawer__group-toggle-title--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle-title--max-lines	1
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle-count--MarginRight	1rem
--pf-c-notification-drawer__group-toggle-count--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle-icon--MarginRight	1rem
--pf-c-notification-drawer__group-toggle-icon--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle-icon--Color	#6a6e73
--pf-c-notification-drawer__group-toggle-icon--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-notification-drawer	--pf-c-notification-drawer__group-toggle-icon--Transition	.2s ease-in 0s
	.pf-c-notification-drawer	--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate	90deg
	.pf-c-notification-drawer__list-item.pf-m-read	--pf-c-notification-drawer__list-item--BoxShadow	none
	.pf-c-notification-drawer__list-item.pf-m-read	--pf-c-notification-drawer__list-item--BorderBottomColor	#d2d2d2
--pf-c-notification-drawer__list-item--BorderBottomColor --pf-c-notification-drawer__list-item--m-read--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-notification-drawer__list-item.pf-m-read	--pf-c-notification-drawer__list-item--BackgroundColor	#f0f0f0
--pf-c-notification-drawer__list-item--BackgroundColor --pf-c-notification-drawer__list-item--m-read--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-notification-drawer__list-item.pf-m-read	--pf-c-notification-drawer__list-item--before--Top	calc(1px * -1)
--pf-c-notification-drawer__list-item--before--Top --pf-c-notification-drawer__list-item--m-read--before--Top calc(--pf-c-notification-drawer__list-item--BorderBottomWidth * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-notification-drawer__list-item.pf-m-read	--pf-c-notification-drawer__list-item--before--Bottom	0
--pf-c-notification-drawer__list-item--before--Bottom --pf-c-notification-drawer__list-item--m-read--before--Bottom 0
	.pf-c-notification-drawer__list-item.pf-m-read	--pf-c-notification-drawer__list-item--before--BackgroundColor	transparent
--pf-c-notification-drawer__list-item--before--BackgroundColor --pf-c-notification-drawer__list-item--m-read--before--BackgroundColor transparent
	.pf-c-notification-drawer__list-item.pf-m-read	--pf-c-notification-drawer__list-item-header-title--FontWeight	400
--pf-c-notification-drawer__list-item-header-title--FontWeight --pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-notification-drawer__list-item:not(.pf-m-read) + .pf-c-notification-drawer__list-item.pf-m-read	--pf-c-notification-drawer__list-item--BoxShadow	inset 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-notification-drawer__list-item--BoxShadow --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow inset --pf-global--BoxShadow--sm-bottom inset $pf-global--BoxShadow--sm-bottom inset 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) inset 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) inset 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-notification-drawer__list-item:not(.pf-m-read) + .pf-c-notification-drawer__list-item.pf-m-read	--pf-c-notification-drawer__list-item--before--Top	0
--pf-c-notification-drawer__list-item--before--Top --pf-c-notification-drawer__list-item--list-item--m-read--before--Top 0
	.pf-c-notification-drawer__list-item.pf-m-info	--pf-c-notification-drawer__list-item--before--BackgroundColor	#2b9af3
--pf-c-notification-drawer__list-item--before--BackgroundColor --pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor --pf-global--info-color--100 $pf-global--info-color--100 $pf-color-blue-300 #2b9af3
	.pf-c-notification-drawer__list-item.pf-m-info	--pf-c-notification-drawer__list-item-header-icon--Color	#2b9af3
--pf-c-notification-drawer__list-item-header-icon--Color --pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color --pf-global--info-color--100 $pf-global--info-color--100 $pf-color-blue-300 #2b9af3
	.pf-c-notification-drawer__list-item.pf-m-warning	--pf-c-notification-drawer__list-item--before--BackgroundColor	#f0ab00
--pf-c-notification-drawer__list-item--before--BackgroundColor --pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-notification-drawer__list-item.pf-m-warning	--pf-c-notification-drawer__list-item-header-icon--Color	#f0ab00
--pf-c-notification-drawer__list-item-header-icon--Color --pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-notification-drawer__list-item.pf-m-danger	--pf-c-notification-drawer__list-item--before--BackgroundColor	#c9190b
--pf-c-notification-drawer__list-item--before--BackgroundColor --pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-notification-drawer__list-item.pf-m-danger	--pf-c-notification-drawer__list-item-header-icon--Color	#c9190b
--pf-c-notification-drawer__list-item-header-icon--Color --pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-notification-drawer__list-item.pf-m-success	--pf-c-notification-drawer__list-item--before--BackgroundColor	#3e8635
--pf-c-notification-drawer__list-item--before--BackgroundColor --pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-notification-drawer__list-item.pf-m-success	--pf-c-notification-drawer__list-item-header-icon--Color	#3e8635
--pf-c-notification-drawer__list-item-header-icon--Color --pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-notification-drawer__list-item.pf-m-default	--pf-c-notification-drawer__list-item--before--BackgroundColor	#009596
--pf-c-notification-drawer__list-item--before--BackgroundColor --pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor --pf-global--default-color--200 $pf-global--default-color--200 $pf-color-cyan-300 #009596
	.pf-c-notification-drawer__list-item.pf-m-default	--pf-c-notification-drawer__list-item-header-icon--Color	#009596
--pf-c-notification-drawer__list-item-header-icon--Color --pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color --pf-global--default-color--200 $pf-global--default-color--200 $pf-color-cyan-300 #009596
	.pf-c-notification-drawer__group .pf-c-notification-drawer__list-item:last-child	--pf-c-notification-drawer__list-item--BorderBottomWidth	0
	.pf-c-notification-drawer__group .pf-c-notification-drawer__list-item:last-child	--pf-c-notification-drawer__list-item--before--Bottom	0

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines

Notification drawer

Examples

Basic

Notifications

Info notification:Unread info notification title

Danger notification:Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

Danger notification:Unread danger notification title. This is a long title to show how the title will be truncated if it is long and will be shown in a single line.

Warning notification:Read warning notification title

Success notification:Read success notification title

notification:Read (default) notification title

Groups

Notifications

First notification group2

Info notification:Unread info notification title

Danger notification:Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

Warning notification:Read warning notification title

Success notification:Read success notification title

Second notification group2

Info notification:Unread info notification title

Danger notification:Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

Warning notification:Read warning notification title

Success notification:Read success notification title

Third notification group. This is a long title to show how the title will be truncated if it is long and will be shown in a single line.0

No alerts found

Lightweight

Notifications

First notification group4

Info notification:Info notification title

Danger notification:Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

Warning notification:Warning notification title

Success notification:Success notification title

Second notification group4

Info notification:Info notification title w/action

Danger notification:Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.

Warning notification:Warning notification title

Success notification:Success notification title

Third notification group0

No alerts found

Props

NotificationDrawer

NotificationDrawerBody

NotificationDrawerHeader

NotificationDrawerGroup

NotificationDrawerGroupList

NotificationDrawerList

NotificationDrawerListItem

NotificationDrawerListItemBody

NotificationDrawerListItemHeader

CSS variables