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

Notifications

3 unread
  • 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

Notifications

4 unread

  • 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

Notifications

  • 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
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the notification drawer
classNamestringAdditional classes added to the notification drawer

NotificationDrawerBody

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the body of the notification drawer
classNamestring''Additional classes added to the notification drawer body

NotificationDrawerHeader

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the drawer
classNamestring''Additional classes for notification drawer header.
closeButtonAriaLabelstring'Close'Adds custom accessible text to the notification drawer close button.
countnumberNotification drawer heading count
customTextstringNotification drawer heading custom text which can be used instead of providing count/unreadText
onClose(event: KeyboardEvent | React.MouseEvent) => voidCallback for when close button is clicked
titlestring'Notifications'Notification drawer heading title
unreadTextstring'unread'Notification drawer heading unread text used in combination with a count

NotificationDrawerGroup

*required
NameTypeDefaultDescription
countrequirednumberNotification drawer group count
isExpandedrequiredbooleanAdds styling to the group to indicate expanded state
titlerequiredReact.ReactNodeNotification drawer group title
childrenReact.ReactNodeContent rendered inside the group
classNamestring''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.
isReadbooleanfalseAdds styling to the group to indicate whether it has been read
onExpand(event: any, value: boolean) => void(event: any, expanded: boolean) => undefined as anyCallback 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
truncateTitlenumber0Truncate title to number of lines

NotificationDrawerGroupList

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the notification drawer list body
classNamestring''Additional classes added to the notification drawer list body

NotificationDrawerList

*required
NameTypeDefaultDescription
aria-labelstringAdds an accessible label to the notification drawer list.
childrenReact.ReactNodeContent rendered inside the notification drawer list body
classNamestring''Additional classes added to the notification drawer list body
isHiddenbooleanfalseAdds styling to the notification drawer list to indicate expand/hide state

NotificationDrawerListItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the list item
classNamestring''Additional classes added to the list item
isHoverablebooleantrueModifies the list item to include hover styles on :hover
isReadbooleanfalseAdds styling to the list item to indicate it has been read
onClick(event: any) => void(event: React.MouseEvent) => undefined as anyCallback for when a list item is clicked
readStateScreenReaderTextstringVisually hidden text that conveys the current read state of the notification list item
tabIndexnumber0Tab index for the list item
variant'custom' | 'success' | 'danger' | 'warning' | 'info''custom'Variant indicates the severity level

NotificationDrawerListItemBody

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the list item body
classNamestring''Additional classes added to the list item body
timestampReact.ReactNodeList item timestamp

NotificationDrawerListItemHeader

*required
NameTypeDefaultDescription
titlerequiredstringNotification drawer list item title
actionHasNoOffsetbooleanfalseRemoves the offset of the notification drawer actions.
childrenReact.ReactNodeActions rendered inside the notification drawer list item header
classNamestring''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.
iconReact.ReactNodenullAdd custom icon for notification drawer list item header
srTitlestringNotification 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
truncateTitlenumber0Truncate title to number of lines
variant'success' | 'danger' | 'warning' | 'info' | 'custom''custom'Variant indicates the severity level

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__header--PaddingBlockStart
1rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__header--PaddingInlineEnd
1.5rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__header--PaddingBlockEnd
1rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__header--PaddingInlineStart
1.5rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__header--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__header--ZIndex
200
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__header-title--FontSize
1.25rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__header-title--FontWeight
500
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__header-title--LineHeight
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--pf-v6-c-notification-drawer__header-status--MarginInlineStart
1rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__header-status--FontWeight
500
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__header-status--FontSize
0.875rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__header-status--Color
(In light theme) #4d4d4d
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__body--ZIndex
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--pf-v6-c-notification-drawer__list--Gap
0.5rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__list--PaddingInlineStart
1.5rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__list--PaddingInlineEnd
1.5rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__list-item--PaddingBlockStart
1rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd
1rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__list-item--PaddingBlockEnd
1rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__list-item--PaddingInlineStart
1rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__list-item--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__list-item--BorderWidth
2px
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__list-item--BorderRadius
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--pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor
(In light theme) #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--pf-v6-c-notification-drawer__list-item--m-warning__list-item--BorderColor
(In light theme) #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--pf-v6-c-notification-drawer__list-item--m-danger__list-item--BorderColor
(In light theme) #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--pf-v6-c-notification-drawer__list-item--m-success__list-item--BorderColor
(In light theme) #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--pf-v6-c-notification-drawer__list-item--m-custom__list-item--BorderColor
(In light theme) #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--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth
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--pf-v6-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd
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--pf-v6-c-notification-drawer__list-item-header-title--FontWeight
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--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd
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--pf-v6-c-notification-drawer__list-item-timestamp--FontSize
0.875rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__group--BorderBlockEndWidth
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--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--pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart
1rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd
1.5rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd
1rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart
1.5rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__group-toggle--BackgroundColor
(In light theme) #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--pf-v6-c-notification-drawer__group-toggle-title--FontSize
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--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd
1rem
.pf-v6-c-notification-drawer--pf-v6-c-notification-drawer__group-toggle-icon--Color
(In light theme) #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.pf-m-info--pf-v6-c-notification-drawer__list-item-header-icon--Color
(In light theme) #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.pf-m-warning--pf-v6-c-notification-drawer__list-item-header-icon--Color
(In light theme) #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.pf-m-danger--pf-v6-c-notification-drawer__list-item-header-icon--Color
(In light theme) #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.pf-m-success--pf-v6-c-notification-drawer__list-item-header-icon--Color
(In light theme) #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.pf-m-custom--pf-v6-c-notification-drawer__list-item-header-icon--Color
(In light theme) #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.pf-m-read--pf-v6-c-notification-drawer__list-item--BackgroundColor
(In light theme) #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-action.pf-m-no-offset--pf-v6-c-notification-drawer__list-item-action--MarginBlockStart
0