Links

Alert

Alert banners communicate a state that affects the entire system, not just a feature or page.
The Alert is also available as an Experience Cloud Component.

Overview

The Alert Component is a lightweight and customizable component that allows you to display important messages or notifications to the user within a Flow screen. It is typically used to alert the user to a specific event or condition, such as an error, warning, or success message. It can be used to communicate important information or instructions to the user.
The Alert Component consists of a box containing a message and an optional icon, which can be displayed in various styles and colors to indicate the type or severity of the alert. You can customize the appearance and behavior of the Alert Flow Component, including the font, size, and color of the message text, as well as the color and style of the background and border.
Works on Desktop and Mobile
This page walks you through:

Changing the Properties

The Variant lets you change the appearance of the component.
  • Base: Use the info alert when notifying the user of neutral information about the system.
  • Warning: Use the warning variant to warn the user about important system information that deserves caution.
  • Error: Use the error variant when you need to alert the user about an error in the system that needs immediate attention.
  • Offline: Use the offline alert to let the user know that they are not connected to the internet.

Adding Interactions

No interactions are available.

Styling the Alert

From the Styles panel, you can customize styling attributes for the Alert:
  • Text: to customize text fint weight.
  • Border: to customize styling for the border.
  • Base: to customize styling for the Base variant.
  • Error: to customize styling for the Error variant.
  • Offline: to customize styling for the Offline variant.
  • Warning: to customize styling for the Warning variant.
You can find the instructions for styling here.

Tutorials

The following examples demonstrate some of the available functionality for the Alert component.

Specifications

Attributes

Name
Type
Description
content
String
Text to display for the content of the alert.
iconName
String
The Lightning Design System name of the icon. Specify the name in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed
isDismissible
Boolean
Specify if the alert can be closed.
variant
String
The variant change the apparence of the alert. Valid values include base, error, offline and warning.

Events

No events are available.

Styling Hooks

Name
Description
Block Start
Defines the amount of space along the outer starting edge of an element in the block direction.
Block End
Defines the amount of space along the outer ending edge of an element in the block direction.
Inline Start
Defines the logical inline start margin of an element.
Inline End
Defines the logical inline end margin of an element.
Font Weight
Defines a font weight for the text.
Border Color
Defines a font weight for the text.
Border Size
Defines a font weight for the text.
Border Style
Define a font weight for the text.

For each variant (Base, Error, Offline, Warning)

Name
Description
Text Color
Defines a text color for content.
Background Color
Defines a background color and override the default variant color.
Icon Background Color
Defines an icon background color.
Foreground Background Color
Defines a foreground background color.
Icon Utility Foreground Color
Defines an icon utility foreground color.
Close Icon Foreground Color
Defines a close icon foreground color if isdismissible property is checked.
Last modified 3mo ago