Skip to Content
Patternfly Logo

Alert group

An alert group is used to stack and position alerts in a layer over the main content of a page. This component is mainly used for positioning toast alerts. Related design guidelines: Alerts and notifications

ExamplesPropsCSS Variables

Examples

Static alert group

  • Success alert:Success Alert

  • Info alert:Info Alert

Toast alert group

Singular dynamic alert group

    Multiple dynamic alert group

    Async alert group

    Props

    Alert properties
    NameTypeRequiredDefaultDescription
    variant'success' | 'danger' | 'warning' | 'info' | 'default'NoAlertVariant.defaultAdds Alert variant styles
    isInlinebooleanNofalseFlag to indicate if the Alert is inline
    titleReact.ReactNodeYesTitle of the Alert
    actionCloseReact.ReactNodeNoClose button; use the AlertActionCloseButton component
    actionLinksReact.ReactNodeNoAction links; use a single AlertActionLink component or multiple wrapped in an array or React.Fragment
    childrenReact.ReactNodeNo''Content rendered inside the Alert
    classNamestringNo''Additional classes added to the Alert
    aria-labelstringNo`${capitalize(variant)} Alert`Adds accessible text to the Alert
    variantLabelstringNo`${capitalize(variant)} alert:`Variant label text for screen readers
    isLiveRegionbooleanNofalseFlag to indicate if the Alert is in a live region
    timeoutnumber | booleanNofalseIf set to true, the time out is 8000 milliseconds. If a number is provided, alert will be dismissed after that amount of time in milliseconds.
    ouiaSafeNotrue
    AlertGroup properties
    NameTypeRequiredDefaultDescription
    classNamestringNoAdditional classes added to the AlertGroup
    childrenReact.ReactNodeNoAlerts to be rendered in the AlertGroup
    isToastbooleanNoToast notifications are positioned at the top right corner of the viewport
    appendToHTMLElement | (() => HTMLElement)NoDetermine where the alert is appended to
    AlertActionCloseButton properties
    NameTypeRequiredDefaultDescription
    classNamestringNo''Additional classes added to the AlertActionCloseButton
    onClose() => voidNo() => undefined as anyA callback for when the close button is clicked
    aria-labelstringNo''Aria Label for the Close button
    variantLabelstringNoVariant Label for the Close button
    AlertActionLink properties
    NameTypeRequiredDefaultDescription
    childrenstringNoContent rendered inside the AlertLinkAction
    classNamestringNo''Additional classes added to the AlertActionLink

    CSS Variables

    .pf-c-alert-group--pf-c-alert-group__item--MarginTopc_alert_group__item_MarginTop
    0.5rem
    .pf-c-alert-group--pf-c-alert-group--m-toast--Topc_alert_group_m_toast_Top
    3rem
    .pf-c-alert-group--pf-c-alert-group--m-toast--Rightc_alert_group_m_toast_Right
    2rem
    .pf-c-alert-group--pf-c-alert-group--m-toast--MaxWidthc_alert_group_m_toast_MaxWidth
    37.5rem
    .pf-c-alert-group--pf-c-alert-group--m-toast--ZIndexc_alert_group_m_toast_ZIndex
    600