Skip to content
Patternfly Logo

Info alert:Beta feature

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

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

2 unread alerts

  • 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

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the notification drawer
classNamestringNo''Additional classes added to the notification drawer

NotificationDrawerBody

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the body of the notification drawer
classNamestringNo''Additional classes added to the notification drawer body

NotificationDrawerHeader

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the drawer
classNamestringNo''Additional classes for notification drawer header.
closeButtonAriaLabelstringNo'Close'Adds custom accessible text to the notification drawer close button.
countnumberNoNotification drawer heading count
customTextstringNoNotification drawer heading custom text which can be used instead of providing count/unreadText
onClose() => voidNoCallback for when close button is clicked
titlestringNo'Notifications'Notification drawer heading title
unreadTextstringNo'unread'Notification drawer heading unread text used in combination with a count

NotificationDrawerGroup

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
tooltipPosition'auto' | 'top' | 'bottom' | 'left' | 'right'NoPosition of the tooltip which is displayed if text is truncated
truncateTitlenumberNo0Truncate title to number of lines

NotificationDrawerGroupList

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the notification drawer list body
classNamestringNo''Additional classes added to the notification drawer list body

NotificationDrawerList

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

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent 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'default' | 'success' | 'danger' | 'warning' | 'info'No'default'Variant indicates the severity level

NotificationDrawerListItemBody

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the list item body
classNamestringNo''Additional classes added to the list item body
timestampReact.ReactNodeNoList item timestamp

NotificationDrawerListItemHeader

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
tooltipPosition'auto' | 'top' | 'bottom' | 'left' | 'right'NoPosition of the tooltip which is displayed if text is truncated
truncateTitlenumberNo0Truncate title to number of lines
variant'success' | 'danger' | 'warning' | 'info' | 'default'No'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