Alert

Variant examples

PatternFly supports several alert variants for different scenarios. Each variant has an associated status icon, background, and alert title coded to communicate the severity of an alert. Use the variant property to apply the following styling options. If no variant is specified, then the variant will be set to "default".

Alert variations

PatternFly supports several properties and variations that can be used to add extra content to an alert.

• As demonstrated in the 1st variation below, use the actionLinks property to add one or more <AlertActionLink> components that place links beneath the alert message. You must pass in href and component="a" properties to have an <AlertActionLink> act as a proper link, rather than as a button.

• As demonstrated in the 2nd variation below, use a native HTML <a> element to add links within an alert message.

• As demonstrated in the 3rd and 4th variations below, use the actionClose property to add an <AlertActionCloseButton> component, which can be used to manage and customize alert dismissals. actionClose can be used with or without the presence of actionLinks.

• As demonstrated in the 5th and 6th variations below, use the component property to set the element for an alert title.

  • If the description prop is not passed in, then the component prop should be set to a non-heading element such as a span or div.
  • If the description prop is passed in, then the component prop should be a heading element. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an h2 level should not be followed directly by an h4.

Alert timeout

Use the timeout property to automatically dismiss an alert after a period of time. If set to true, the timeout will be 8000 milliseconds. Provide a specific value to dismiss the alert after a different number of milliseconds.

Expandable alerts

An alert can contain additional, hidden information that is made visible when users click a caret icon. This information can be expanded and collapsed each time the icon is clicked.

It is not recommended to use an expandable alert with a timeout in a toast alert group because the alert could timeout before users have time to interact with and view the entire alert.

See the toast alert considerations section of the alert accessibility documentation to understand the accessibility risks associated with using toast alerts.

Truncated alerts

Use the truncateTitle property to shorten a long title. Set truncateTitle equal to a number (passed in as {n}) to reduce the number of lines of text in the alert's title. Users may hover over or tab to a truncated title to see the full message in a tooltip.

Custom icons

Use the customIcon property to replace a default alert icon with a custom icon.

Inline alerts variants

Use inline alerts to display an alert inline with content. All alert variants may use the isInline property to position alerts in content-heavy areas, such as within forms, wizards, or drawers.

Inline alert variations

All general alert variations can use the isInline property to apply inline styling.

Plain inline alert variants

Use the isPlain property to make any inline alert plain. Plain styling removes the colored background but keeps colored text and icons.

Plain inline alert variations

It is not recommended to use a plain inline alert with actionClose nor actionLinks because these alerts are non-dismissible and should persist until the error or action related to the alert is resolved.

Static live region alerts

Live region alerts allow you to expose dynamic content changes in a way that can be announced by assistive technologies.

By default, isLiveRegionalerts are static.

Dynamic live region alerts

Alerts that are asynchronously appended into dynamic alert groups via the isLiveRegion property will be announced to assistive technology 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.

Asynchronous live region alerts

This example shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the [https://www.patternfly.org/v4/components/alert/accessibility](alert accessibility) for more information.