Alert

Attributes

variant

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".

• Default - Use for generic messages with no associated severity
• Info - Use for general informational messages
• Success - Use to indicate that a task or process has been completed successfully
• Warning - Use to indicate that a non-critical error has occurred
• Danger - Use to indicate that a critical or blocking error has occurred

DOM Property

variant

Type

| 'warning'
    | 'custom'
    | 'neutral'
    | 'info'
    | 'success'
    | 'danger'

Default

'neutral'

icon

Use the icon attribute to replace a default alert icon with a custom icon. The icon attribute is overridden by the icon slot.

DOM Property

icon

Type

string

Default

unknown

title-text

The title of the alert. Overridden by the title slot.

DOM Property

titleText

Type

string

Default

unknown

title-level

The heading level of the alert's title. Overridden by the title slot. Default: 3

DOM Property

titleLevel

Type

1 | 2 | 3 | 4 | 5 | 6

Default

unknown

inline

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

DOM Property

inline

Type

boolean

Default

false

plain

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

DOM Property

plain

Type

boolean

Default

false

expandable

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.

DOM Property

expandable

Type

boolean

Default

false

expanded

True when an expandable alert is expanded

DOM Property

expanded

Type

boolean

Default

false

dismissable

When true, the alert displays a close button Clicking the close button removes the alert

DOM Property

dismissable

Type

boolean

Default

false