Skip to content
Patternfly Logo

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

    NameTypeRequiredDefaultDescription
    actionCloseReact.ReactNodeNoClose button; use the AlertActionCloseButton component
    actionLinksReact.ReactNodeNoAction links; use a single AlertActionLink component or multiple wrapped in an array or React.Fragment
    aria-labelstringNo`${capitalize(variant)} Alert`Adds accessible text to the Alert
    childrenReact.ReactNodeNo''Content rendered inside the Alert
    classNamestringNo''Additional classes added to the Alert
    isInlinebooleanNofalseFlag to indicate if the Alert is inline
    isLiveRegionbooleanNofalseFlag to indicate if the Alert is in a live region
    onTimeout() => voidNoFunction to be executed on alert timeout. Relevant when the timeout prop is set
    ouiaSafeNo type infoNotrue
    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.
    titleReact.ReactNodeYesTitle of the Alert
    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'NoAlertVariant.defaultAdds Alert variant styles
    variantLabelstringNo`${capitalize(variant)} alert:`Variant label text for screen readers

    AlertGroup

    NameTypeRequiredDefaultDescription
    appendToHTMLElement | (() => HTMLElement)NoDetermine where the alert is appended to
    childrenReact.ReactNodeNoAlerts to be rendered in the AlertGroup
    classNamestringNoAdditional classes added to the AlertGroup
    isToastbooleanNoToast notifications are positioned at the top right corner of the viewport

    AlertActionCloseButton

    NameTypeRequiredDefaultDescription
    aria-labelstringNo''Aria Label for the Close button
    classNamestringNo''Additional classes added to the AlertActionCloseButton
    onClose() => voidNo() => undefined as anyA callback for when the close button is clicked
    variantLabelstringNoVariant Label for the Close button
    NameTypeRequiredDefaultDescription
    childrenstringNoContent rendered inside the AlertLinkAction
    classNamestringNo''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