Skip to content
PatternFly logo

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

Notifications

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

Notifications

4 unread

  • 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

Notifications

  • 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
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() => 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
titlerequiredstring | React.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
tooltipPositionTooltipPosition | '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
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
tabIndexnumber0Tab index for the list item
variant'default' | 'success' | 'danger' | 'warning' | 'info''default'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
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
tooltipPositionTooltipPosition | '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' | 'default''default'Variant indicates the severity level

CSS variables

.pf-c-notification-drawer--pf-c-notification-drawer--BackgroundColor
#f0f0f0
.pf-c-notification-drawer--pf-c-notification-drawer__header--PaddingTop
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__header--PaddingRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__header--PaddingBottom
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__header--PaddingLeft
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__header--BackgroundColor
#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--pf-c-notification-drawer__header--ZIndex
200
.pf-c-notification-drawer--pf-c-notification-drawer__header-title--FontSize
1.25rem
.pf-c-notification-drawer--pf-c-notification-drawer__header-status--MarginLeft
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__body--ZIndex
100
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--PaddingTop
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--PaddingRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--PaddingBottom
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--PaddingLeft
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--BackgroundColor
#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--pf-c-notification-drawer__list-item--BorderBottomWidth
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--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--pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color
#2b9af3
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor
#2b9af3
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color
#f0ab00
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor
#f0ab00
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color
#c9190b
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor
#c9190b
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color
#3e8635
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor
#3e8635
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color
#009596
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor
#009596
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--BackgroundColor
#f0f0f0
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--BorderBottomColor
#d2d2d2
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--before--Top
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--pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex
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--pf-c-notification-drawer__list-item-header--MarginBottom
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--pf-c-notification-drawer__list-item-header-title--FontWeight
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--pf-c-notification-drawer__list-item-description--MarginBottom
0.5rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-timestamp--Color
#6a6e73
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-timestamp--FontSize
0.875rem
.pf-c-notification-drawer--pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth
1px
.pf-c-notification-drawer--pf-c-notification-drawer__group--m-expanded--group--BorderTopColor
#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--pf-c-notification-drawer__group-toggle--PaddingRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--PaddingBottom
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--PaddingLeft
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--BackgroundColor
#fff
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--BorderColor
#d2d2d2
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--BorderBottomWidth
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--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--pf-c-notification-drawer__group-toggle-icon--MarginRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle-icon--Color
#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.pf-m-read--pf-c-notification-drawer__list-item--BackgroundColor
#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.pf-m-read--pf-c-notification-drawer__list-item--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.pf-m-read--pf-c-notification-drawer__list-item-header-title--FontWeight
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: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.pf-m-info--pf-c-notification-drawer__list-item--before--BackgroundColor
#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.pf-m-warning--pf-c-notification-drawer__list-item--before--BackgroundColor
#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.pf-m-danger--pf-c-notification-drawer__list-item--before--BackgroundColor
#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.pf-m-success--pf-c-notification-drawer__list-item--before--BackgroundColor
#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.pf-m-default--pf-c-notification-drawer__list-item--before--BackgroundColor
#009596
.pf-c-notification-drawer__list-item.pf-m-default--pf-c-notification-drawer__list-item-header-icon--Color
#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