Skip to Content
Patternfly Logo

Notification drawer

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesPropsCSS Variables

Examples

Basic

Notifications

2 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

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

Props

NotificationDrawer properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the notification drawer
classNamestringNo''Additional classes added to the notification drawer
NotificationDrawerBody properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the body of the notification drawer
classNamestringNo''Additional classes added to the notification drawer body
NotificationDrawerHeader properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the drawer
classNamestringNo''Additional classes for notification drawer header.
countnumberNoNotification drawer heading count
titlestringNo'Notifications'Notification drawer heading title
unreadTextstringNo'unread'Notification drawer heading unread custom text
NotificationDrawerGroup properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the group
classNamestringNo''Additional classes added to the group
countnumberYesNotification drawer group count
isExpandedbooleanYesAdds styling to the group to indicate expanded state
isReadbooleanNofalseAdds styling to the group to indicate whether it has been read
onExpand(event: any, value: boolean) => voidNo(event: any, expanded: boolean) => undefined as anyCallback for when group button is clicked to expand
titlestringYesNotification drawer group title
NotificationDrawerGroupList properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the notification drawer list body
classNamestringNo''Additional classes added to the notification drawer list body
NotificationDrawerList properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the notification drawer list body
classNamestringNo''Additional classes added to the notification drawer list body
isHiddenbooleanNofalseAdds styling to the notification drawer list to indicate expand/hide state
NotificationDrawerListItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the list item
classNamestringNo''Additional classes added to the list item
isHoverablebooleanNotrueModifies the list item to include hover styles on :hover
isReadbooleanNofalseAdds styling to the list item to indicate it has been read
onClick(event: any) => voidNo(event: React.MouseEvent) => undefined as anyCallback for when a list item is clicked
tabIndexnumberNo0Tab index for the list item
variant'success' | 'danger' | 'warning' | 'info' | 'default'No'default'Variant indicates the severity level
NotificationDrawerListItemBody properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the list item body
classNamestringNo''Additional classes added to the list item body
timestampReact.ReactNodeNoList item timestamp
NotificationDrawerListItemHeader properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoActions rendered inside the notification drawer list item header
classNamestringNo''Additional classes for notification drawer list item header.
iconReact.ReactNodeNonullAdd custom icon for notification drawer list item header
srTitlestringNoNotification drawer list item header screen reader title
titlestringYesNotification drawer list item title
variant'success' | 'danger' | 'warning' | 'info' | 'default'No'default'Variant indicates the severity level

CSS Variables

.pf-c-notification-drawer--pf-c-notification-drawer--BackgroundColorc_notification_drawer_BackgroundColor
#fafafa
.pf-c-notification-drawer--pf-c-notification-drawer__header--PaddingTopc_notification_drawer__header_PaddingTop
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__header--PaddingRightc_notification_drawer__header_PaddingRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__header--PaddingBottomc_notification_drawer__header_PaddingBottom
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__header--PaddingLeftc_notification_drawer__header_PaddingLeft
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__header--BackgroundColorc_notification_drawer__header_BackgroundColor
#fff
.pf-c-notification-drawer--pf-c-notification-drawer__header--BoxShadowc_notification_drawer__header_BoxShadow
0 0.25rem 0.625rem -0.25rem rgba(3, 3, 3, 0.12)
.pf-c-notification-drawer--pf-c-notification-drawer__header--ZIndexc_notification_drawer__header_ZIndex
200
.pf-c-notification-drawer--pf-c-notification-drawer__header-title--FontSizec_notification_drawer__header_title_FontSize
1.25rem
.pf-c-notification-drawer--pf-c-notification-drawer__header-status--MarginLeftc_notification_drawer__header_status_MarginLeft
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__body--ZIndexc_notification_drawer__body_ZIndex
100
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--PaddingTopc_notification_drawer__list_item_PaddingTop
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--PaddingRightc_notification_drawer__list_item_PaddingRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--PaddingBottomc_notification_drawer__list_item_PaddingBottom
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--PaddingLeftc_notification_drawer__list_item_PaddingLeft
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--BackgroundColorc_notification_drawer__list_item_BackgroundColor
#fff
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--BoxShadowc_notification_drawer__list_item_BoxShadow
inset 0 0.25rem 0.625rem -0.25rem rgba(3, 3, 3, 0.12)
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--BorderBottomWidthc_notification_drawer__list_item_BorderBottomWidth
1px
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--BorderBottomColorc_notification_drawer__list_item_BorderBottomColor
transparent
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--OutlineOffsetc_notification_drawer__list_item_OutlineOffset
-0.25rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--before--Widthc_notification_drawer__list_item_before_Width
3px
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--before--Topc_notification_drawer__list_item_before_Top
0
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--before--Bottomc_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--Colorc_notification_drawer__list_item_m_info__list_item_header_icon_Color
#73bcf7
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColorc_notification_drawer__list_item_m_info__list_item_before_BackgroundColor
#73bcf7
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Colorc_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--BackgroundColorc_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--Colorc_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--BackgroundColorc_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--Colorc_notification_drawer__list_item_m_success__list_item_header_icon_Color
#92d400
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColorc_notification_drawer__list_item_m_success__list_item_before_BackgroundColor
#92d400
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--BackgroundColorc_notification_drawer__list_item_m_read_BackgroundColor
#fafafa
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--BorderBottomColorc_notification_drawer__list_item_m_read_BorderBottomColor
#d2d2d2
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--before--Topc_notification_drawer__list_item_m_read_before_Top
calc(1px * -1)
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--before--Bottomc_notification_drawer__list_item_m_read_before_Bottom
0
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read--before--BackgroundColorc_notification_drawer__list_item_m_read_before_BackgroundColor
transparent
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--list-item--m-read--before--Topc_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--BoxShadowc_notification_drawer__list_item_list_item_m_read_BoxShadow
inset 0 0.25rem 0.625rem -0.25rem rgba(3, 3, 3, 0.12)
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndexc_notification_drawer__list_item_m_hoverable_hover_ZIndex
100
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadowc_notification_drawer__list_item_m_hoverable_hover_BoxShadow
0 -0.3125rem 0.625rem -0.25rem rgba(3, 3, 3, 0.25), 0 0.3125rem 0.625rem -0.25rem rgba(3, 3, 3, 0.25)
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-header--MarginBottomc_notification_drawer__list_item_header_MarginBottom
0.25rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-header-icon--Colorc_notification_drawer__list_item_header_icon_Color
inherit
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-header-icon--MarginRightc_notification_drawer__list_item_header_icon_MarginRight
0.5rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-header-title--FontWeightc_notification_drawer__list_item_header_title_FontWeight
600
.pf-c-notification-drawer--pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeightc_notification_drawer__list_item_m_read__list_item_header_title_FontWeight
400
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-description--MarginBottomc_notification_drawer__list_item_description_MarginBottom
0.5rem
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-timestamp--Colorc_notification_drawer__list_item_timestamp_Color
#737679
.pf-c-notification-drawer--pf-c-notification-drawer__list-item-timestamp--FontSizec_notification_drawer__list_item_timestamp_FontSize
0.875rem
.pf-c-notification-drawer--pf-c-notification-drawer__group--m-expanded--group--BorderTopWidthc_notification_drawer__group_m_expanded_group_BorderTopWidth
1px
.pf-c-notification-drawer--pf-c-notification-drawer__group--m-expanded--group--BorderTopColorc_notification_drawer__group_m_expanded_group_BorderTopColor
#d2d2d2
.pf-c-notification-drawer--pf-c-notification-drawer__group--m-expanded--MinHeightc_notification_drawer__group_m_expanded_MinHeight
18.75rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--PaddingTopc_notification_drawer__group_toggle_PaddingTop
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--PaddingRightc_notification_drawer__group_toggle_PaddingRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--PaddingBottomc_notification_drawer__group_toggle_PaddingBottom
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--PaddingLeftc_notification_drawer__group_toggle_PaddingLeft
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--BackgroundColorc_notification_drawer__group_toggle_BackgroundColor
#fff
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--BorderColorc_notification_drawer__group_toggle_BorderColor
#d2d2d2
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--BorderBottomWidthc_notification_drawer__group_toggle_BorderBottomWidth
1px
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle--OutlineOffsetc_notification_drawer__group_toggle_OutlineOffset
-0.25rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle-count--MarginRightc_notification_drawer__group_toggle_count_MarginRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle-icon--MarginRightc_notification_drawer__group_toggle_icon_MarginRight
1rem
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle-icon--Colorc_notification_drawer__group_toggle_icon_Color
#737679
.pf-c-notification-drawer--pf-c-notification-drawer__group-toggle-icon--Transitionc_notification_drawer__group_toggle_icon_Transition
.2s ease-in 0s
.pf-c-notification-drawer--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Transformc_notification_drawer__group_m_expanded__group_toggle_icon_Transform
rotate(90deg)
.pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item--BoxShadowc_notification_drawer__list_item_BoxShadow
none
.pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item--BorderBottomColorc_notification_drawer__list_item_BorderBottomColor
#d2d2d2
.pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item--BackgroundColorc_notification_drawer__list_item_BackgroundColor
#fafafa
.pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item--before--Topc_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--Bottomc_notification_drawer__list_item_before_Bottom
0
.pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item--before--BackgroundColorc_notification_drawer__list_item_before_BackgroundColor
transparent
.pf-c-notification-drawer__list-item.pf-m-read--pf-c-notification-drawer__list-item-header-title--FontWeightc_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--BoxShadowc_notification_drawer__list_item_BoxShadow
inset 0 0.25rem 0.625rem -0.25rem rgba(3, 3, 3, 0.12)
.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--Topc_notification_drawer__list_item_before_Top
0
.pf-c-notification-drawer__list-item.pf-m-info--pf-c-notification-drawer__list-item--before--BackgroundColorc_notification_drawer__list_item_before_BackgroundColor
#73bcf7
.pf-c-notification-drawer__list-item.pf-m-info--pf-c-notification-drawer__list-item-header-icon--Colorc_notification_drawer__list_item_header_icon_Color
#73bcf7
.pf-c-notification-drawer__list-item.pf-m-warning--pf-c-notification-drawer__list-item--before--BackgroundColorc_notification_drawer__list_item_before_BackgroundColor
#f0ab00
.pf-c-notification-drawer__list-item.pf-m-warning--pf-c-notification-drawer__list-item-header-icon--Colorc_notification_drawer__list_item_header_icon_Color
#f0ab00
.pf-c-notification-drawer__list-item.pf-m-danger--pf-c-notification-drawer__list-item--before--BackgroundColorc_notification_drawer__list_item_before_BackgroundColor
#c9190b
.pf-c-notification-drawer__list-item.pf-m-danger--pf-c-notification-drawer__list-item-header-icon--Colorc_notification_drawer__list_item_header_icon_Color
#c9190b
.pf-c-notification-drawer__list-item.pf-m-success--pf-c-notification-drawer__list-item--before--BackgroundColorc_notification_drawer__list_item_before_BackgroundColor
#92d400
.pf-c-notification-drawer__list-item.pf-m-success--pf-c-notification-drawer__list-item-header-icon--Colorc_notification_drawer__list_item_header_icon_Color
#92d400
.pf-c-notification-drawer__group .pf-c-notification-drawer__list-item:last-child--pf-c-notification-drawer__list-item--BorderBottomWidthc_notification_drawer__list_item_BorderBottomWidth
0