Notification drawer

A notification drawer contains an application's notifications, which users can view and manage without having to navigate to a new screen.

Examples

Basic

unread
Info notification:Unread info notification title
This is an info notification description.
5 minutes ago
unread
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
unread
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
read
Warning notification:Read warning notification title
This is a warning notification description.
20 minutes ago
read
Success notification:Read success notification title
This is a success notification description.
30 minutes ago
read
notification:Read (default) notification title
This is a default notification description.
35 minutes ago

Groups

unread
Info notification:Unread info notification title
This is an info notification description.
5 minutes ago
unread
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
read
Warning notification:Read warning notification title
This is a warning notification description.
20 minutes ago
read
Success notification:Read success notification title
This is a success notification description.
30 minutes ago

Lightweight

unread
Info notification:Info notification title w/action
This is an info notification description.
5 minutes ago
unread
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
unread
Warning notification:Warning notification title
This is a warning notification description.
20 minutes ago
unread
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	(event: KeyboardEvent \| React.MouseEvent) => 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	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
aria-label	string		Adds an accessible label to the notification drawer list.
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
readStateScreenReaderText	string		Visually hidden text that conveys the current read state of the notification list item
tabIndex	number	0	Tab index for the list item
variant	'custom' \| 'success' \| 'danger' \| 'warning' \| 'info'	'custom'	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
actionHasNoOffset	boolean	false	Removes the offset of the notification drawer actions.
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' \| 'custom'	'custom'	Variant indicates the severity level

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-notification-drawer--BackgroundColor --pf-t--global--background--color--floating--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header--PaddingBlockStart	1rem
--pf-v6-c-notification-drawer__header--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header--PaddingInlineEnd	1.5rem
--pf-v6-c-notification-drawer__header--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header--PaddingBlockEnd	1rem
--pf-v6-c-notification-drawer__header--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header--PaddingInlineStart	1.5rem
--pf-v6-c-notification-drawer__header--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-notification-drawer__header--BackgroundColor --pf-t--global--background--color--floating--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header--ZIndex	200
--pf-v6-c-notification-drawer__header--ZIndex --pf-t--global--z-index--sm --pf-t--global--z-index--200 200
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header-title--FontSize	1.25rem
--pf-v6-c-notification-drawer__header-title--FontSize --pf-t--global--font--size--heading--md --pf-t--global--font--size--xl --pf-t--global--font--size--500 1.25rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header-title--FontWeight	500
--pf-v6-c-notification-drawer__header-title--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header-title--LineHeight	1.3
--pf-v6-c-notification-drawer__header-title--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header-title--FontFamily	"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
--pf-v6-c-notification-drawer__header-title--FontFamily --pf-t--global--font--family--heading --pf-t--global--font--family--200 "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header-status--MarginInlineStart	1rem
--pf-v6-c-notification-drawer__header-status--MarginInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header-status--FontWeight	500
--pf-v6-c-notification-drawer__header-status--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header-status--FontSize	0.875rem
--pf-v6-c-notification-drawer__header-status--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__header-status--Color	(In light theme) #4d4d4d
--pf-v6-c-notification-drawer__header-status--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__body--ZIndex	100
--pf-v6-c-notification-drawer__body--ZIndex --pf-t--global--z-index--xs --pf-t--global--z-index--100 100
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__body--PaddingBlockStart	0
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__body--PaddingBlockEnd	1rem
--pf-v6-c-notification-drawer__body--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list--Gap	0.5rem
--pf-v6-c-notification-drawer__list--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list--PaddingInlineStart	1.5rem
--pf-v6-c-notification-drawer__list--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list--PaddingInlineEnd	1.5rem
--pf-v6-c-notification-drawer__list--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--PaddingBlockStart	1rem
--pf-v6-c-notification-drawer__list-item--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd	1rem
--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--PaddingBlockEnd	1rem
--pf-v6-c-notification-drawer__list-item--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--PaddingInlineStart	1rem
--pf-v6-c-notification-drawer__list-item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-notification-drawer__list-item--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--BorderWidth	2px
--pf-v6-c-notification-drawer__list-item--BorderWidth --pf-t--global--border--width--box--status--default --pf-t--global--border--width--200 2px
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--BorderRadius	16px
--pf-v6-c-notification-drawer__list-item--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color	(In light theme) #5e40be
--pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color --pf-t--global--icon--color--status--info--default --pf-t--global--color--status--info--default --pf-t--global--color--status--info--100 --pf-t--color--purple--50 #5e40be
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor	(In light theme) #5e40be
--pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor --pf-t--global--border--color--status--info--default --pf-t--global--color--status--info--default --pf-t--global--color--status--info--100 --pf-t--color--purple--50 #5e40be
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color	(In light theme) #dca614
--pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-warning__list-item--BorderColor	(In light theme) #dca614
--pf-v6-c-notification-drawer__list-item--m-warning__list-item--BorderColor --pf-t--global--border--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color	(In light theme) #b1380b
--pf-v6-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-danger__list-item--BorderColor	(In light theme) #b1380b
--pf-v6-c-notification-drawer__list-item--m-danger__list-item--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-success__list-item-header-icon--Color	(In light theme) #3d7317
--pf-v6-c-notification-drawer__list-item--m-success__list-item-header-icon--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-success__list-item--BorderColor	(In light theme) #3d7317
--pf-v6-c-notification-drawer__list-item--m-success__list-item--BorderColor --pf-t--global--border--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color	(In light theme) #147878
--pf-v6-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color --pf-t--global--icon--color--status--custom--default --pf-t--global--color--status--custom--default --pf-t--global--color--status--custom--100 --pf-t--color--teal--60 #147878
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-custom__list-item--BorderColor	(In light theme) #147878
--pf-v6-c-notification-drawer__list-item--m-custom__list-item--BorderColor --pf-t--global--border--color--status--custom--default --pf-t--global--color--status--custom--default --pf-t--global--color--status--custom--100 --pf-t--color--teal--60 #147878
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth	1px
--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth --pf-t--global--border--width--box--status--read --pf-t--global--border--width--100 1px
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-read--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-notification-drawer__list-item--m-read--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd	0.25rem
--pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item-header-icon--Color	inherit
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd	0.5rem
--pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item-header-title--FontWeight	500
--pf-v6-c-notification-drawer__list-item-header-title--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item-header-title--max-lines	1
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item-action--MarginBlockStart	calc(0.5rem * -1)
--pf-v6-c-notification-drawer__list-item-action--MarginBlockStart calc(--pf-t--global--spacer--control--vertical--plain * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd	0.5rem
--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item-timestamp--Color	(In light theme) #4d4d4d
--pf-v6-c-notification-drawer__list-item-timestamp--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__list-item-timestamp--FontSize	0.875rem
--pf-v6-c-notification-drawer__list-item-timestamp--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group--BorderBlockEndWidth	1px
--pf-v6-c-notification-drawer__group--BorderBlockEndWidth --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor	(In light theme) #c7c7c7
--pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group--m-expanded--MinHeight	0
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group--m-expanded--PaddingBlockEnd	1rem
--pf-v6-c-notification-drawer__group--m-expanded--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart	1rem
--pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd	1.5rem
--pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd	1rem
--pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart	1.5rem
--pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-notification-drawer__group-toggle--BackgroundColor --pf-t--global--background--color--floating--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle--OutlineOffset	-0.25rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd	1rem
--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle-title--FontSize	1rem
--pf-v6-c-notification-drawer__group-toggle-title--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle-title--max-lines	1
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd	1rem
--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd	1rem
--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-notification-drawer__group-toggle-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group-toggle-icon--Transition	.2s ease-in 0s
	.pf-v6-c-notification-drawer	--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate	90deg
	.pf-v6-c-notification-drawer__list-item.pf-m-info	--pf-v6-c-notification-drawer__list-item--BorderColor	(In light theme) #5e40be
--pf-v6-c-notification-drawer__list-item--BorderColor --pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor --pf-t--global--border--color--status--info--default --pf-t--global--color--status--info--default --pf-t--global--color--status--info--100 --pf-t--color--purple--50 #5e40be
	.pf-v6-c-notification-drawer__list-item.pf-m-info	--pf-v6-c-notification-drawer__list-item-header-icon--Color	(In light theme) #5e40be
--pf-v6-c-notification-drawer__list-item-header-icon--Color --pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color --pf-t--global--icon--color--status--info--default --pf-t--global--color--status--info--default --pf-t--global--color--status--info--100 --pf-t--color--purple--50 #5e40be
	.pf-v6-c-notification-drawer__list-item.pf-m-warning	--pf-v6-c-notification-drawer__list-item--BorderColor	(In light theme) #dca614
--pf-v6-c-notification-drawer__list-item--BorderColor --pf-v6-c-notification-drawer__list-item--m-warning__list-item--BorderColor --pf-t--global--border--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-notification-drawer__list-item.pf-m-warning	--pf-v6-c-notification-drawer__list-item-header-icon--Color	(In light theme) #dca614
--pf-v6-c-notification-drawer__list-item-header-icon--Color --pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-notification-drawer__list-item.pf-m-danger	--pf-v6-c-notification-drawer__list-item--BorderColor	(In light theme) #b1380b
--pf-v6-c-notification-drawer__list-item--BorderColor --pf-v6-c-notification-drawer__list-item--m-danger__list-item--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-notification-drawer__list-item.pf-m-danger	--pf-v6-c-notification-drawer__list-item-header-icon--Color	(In light theme) #b1380b
--pf-v6-c-notification-drawer__list-item-header-icon--Color --pf-v6-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-notification-drawer__list-item.pf-m-success	--pf-v6-c-notification-drawer__list-item--BorderColor	(In light theme) #3d7317
--pf-v6-c-notification-drawer__list-item--BorderColor --pf-v6-c-notification-drawer__list-item--m-success__list-item--BorderColor --pf-t--global--border--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-notification-drawer__list-item.pf-m-success	--pf-v6-c-notification-drawer__list-item-header-icon--Color	(In light theme) #3d7317
--pf-v6-c-notification-drawer__list-item-header-icon--Color --pf-v6-c-notification-drawer__list-item--m-success__list-item-header-icon--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-notification-drawer__list-item.pf-m-custom	--pf-v6-c-notification-drawer__list-item--BorderColor	(In light theme) #147878
--pf-v6-c-notification-drawer__list-item--BorderColor --pf-v6-c-notification-drawer__list-item--m-custom__list-item--BorderColor --pf-t--global--border--color--status--custom--default --pf-t--global--color--status--custom--default --pf-t--global--color--status--custom--100 --pf-t--color--teal--60 #147878
	.pf-v6-c-notification-drawer__list-item.pf-m-custom	--pf-v6-c-notification-drawer__list-item-header-icon--Color	(In light theme) #147878
--pf-v6-c-notification-drawer__list-item-header-icon--Color --pf-v6-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color --pf-t--global--icon--color--status--custom--default --pf-t--global--color--status--custom--default --pf-t--global--color--status--custom--100 --pf-t--color--teal--60 #147878
	.pf-v6-c-notification-drawer__list-item.pf-m-read	--pf-v6-c-notification-drawer__list-item--BorderWidth	1px
--pf-v6-c-notification-drawer__list-item--BorderWidth --pf-v6-c-notification-drawer__list-item--m-read--BorderWidth --pf-t--global--border--width--box--status--read --pf-t--global--border--width--100 1px
	.pf-v6-c-notification-drawer__list-item.pf-m-read	--pf-v6-c-notification-drawer__list-item--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-notification-drawer__list-item--BackgroundColor --pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-notification-drawer__list-item.pf-m-read	--pf-v6-c-notification-drawer__list-item--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-notification-drawer__list-item--BorderColor --pf-v6-c-notification-drawer__list-item--m-read--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-notification-drawer__list-item-action.pf-m-no-offset	--pf-v6-c-notification-drawer__list-item-action--MarginBlockStart	0

Edit this page on GitHub

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