Skip to Content
Patternfly Logo

Alert group

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.infoAdds Alert variant styles
    isInlinebooleanNofalseFlag to indicate if the Alert is inline
    titleReact.ReactNodeYesTitle of the Alert
    actionReact.ReactNodeNonullAction button to put in the Alert. Should be <AlertActionLink> or <AlertActionCloseButton>
    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
    ouiaContextNonull
    ouiaIdNonull
    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
    variantLabelstringNo''Variant Label for the Close button
    AlertActionLink properties
    NameTypeRequiredDefaultDescription
    childrenstringNo''Content rendered inside the AlertLinkAction
    classNamestringNo''Additional classes added to the AlertActionLink

    CSS Variables

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