Skip to content
Patternfly Logo

Alert group

Examples

Static alert group

These alerts appear on page load and are discoverable from within the normal page content flow, and will not be announced individually/explicitly to assistive technology.

  • Success alert:Success alert

  • Info alert:Info alert

Toast alert group

Alerts asynchronously appended into dynamic AlertGroups with isLiveRegion will be announced to assistive technology at the moment the change happens, following the strategy used for aria-atomic, which defaults to false. This means only changes of type "addition" will be announced.

Singular dynamic alert group

This alert will appear in the page, most likely in response to a user action.

    Multiple dynamic alert group

    These alerts will appear in the page, most likely in response to a user action.

    Async alert group

    This shows how an alert could be triggered by an asynchronous event in the application. Note how you can customize how the alert will be announced to assistive technology. See the alert group accessibility tab for more information.

    Props

    Alert

    *required
    NameTypeDefaultDescription
    titlerequiredReact.ReactNodeTitle of the alert
    actionCloseReact.ReactNodeClose button; use the alertActionCloseButton component
    actionLinksReact.ReactNodeAction links; use a single alertActionLink component or multiple wrapped in an array or React.Fragment
    aria-labelstring`${capitalize(variant)} Alert`Adds accessible text to the alert
    childrenReact.ReactNode''Content rendered inside the alert
    classNamestring''Additional classes added to the alert
    customIconReact.ReactNodeSet a custom icon to the alert. If not set the icon is set according to the variant
    isExpandablebooleanfalseFlag indicating that the alert is expandable
    isInlinebooleanfalseFlag to indicate if the alert is inline
    isLiveRegionbooleanfalseFlag to indicate if the alert is in a live region
    isPlainbooleanfalseFlag to indicate if the alert is plain
    onMouseEnterNo type info() => {}
    onMouseLeaveNo type info() => {}
    onTimeout() => void() => {}Function to be executed on alert timeout. Relevant when the timeout prop is set
    ouiaSafeNo type infotrue
    timeoutnumber | booleanfalseIf set to true, the timeout is 8000 milliseconds. If a number is provided, alert will be dismissed after that amount of time in milliseconds.
    timeoutAnimationnumber3000If the user hovers over the alert and `timeout` expires, this is how long to wait before finally dismissing the alert
    toggleAriaLabelstring`${capitalize(variant)} alert details`Adds accessible text to the alert Toggle
    tooltipPosition'auto' | 'top' | 'bottom' | 'left' | 'right'Position of the tooltip which is displayed if text is truncated
    truncateTitlenumber0Truncate title to number of lines
    variant'success' | 'danger' | 'warning' | 'info' | 'default'AlertVariant.defaultAdds alert variant styles
    variantLabelstring`${capitalize(variant)} alert:`Variant label text for screen readers

    AlertGroup

    *required
    NameTypeDefaultDescription
    appendToHTMLElement | (() => HTMLElement)Determine where the alert is appended to
    childrenReact.ReactNodeAlerts to be rendered in the AlertGroup
    classNamestringAdditional classes added to the AlertGroup
    isLiveRegionbooleanTurns the container into a live region so that changes to content within the AlertGroup, such as appending an Alert, are reliably announced to assistive technology.
    isToastbooleanToast notifications are positioned at the top right corner of the viewport

    AlertActionCloseButton

    *required
    NameTypeDefaultDescription
    aria-labelstring''Aria Label for the Close button
    classNamestring''Additional classes added to the AlertActionCloseButton
    onClose() => void() => undefined as anyA callback for when the close button is clicked
    variantLabelstringVariant Label for the Close button
    *required
    NameTypeDefaultDescription
    childrenstringContent rendered inside the AlertLinkAction
    classNamestring''Additional classes added to the AlertActionLink

    CSS variables

    .pf-c-alert-group--pf-c-alert-group__item--MarginTop
    0.5rem
    .pf-c-alert-group--pf-c-alert-group--m-toast--Top
    3rem
    .pf-c-alert-group--pf-c-alert-group--m-toast--Right
    2rem
    .pf-c-alert-group--pf-c-alert-group--m-toast--MaxWidth
    37.5rem
    .pf-c-alert-group--pf-c-alert-group--m-toast--ZIndex
    600

    View source on GitHub