Alert
The Avonni Alert component is a simple way to display important messages to users. Think of it like a helpful notification that grabs their attention when something needs to be highlighted.
The Avonni Alert displays a contextual message banner to users — for information, warnings, errors, or offline states. Use it whenever you need to communicate status or guidance clearly on a Flow screen.
Overview
The Alert adapts its look to the nature of the message through variants. It supports rich text content, an optional Lightning Design System icon, and can be made dismissible so users can close it when they have read it.
Tutorials
The following examples demonstrate some of the available functionality for the Alert component.
Configuration
To configure it, click the component on the Flow screen. The Edit Alert Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.
Properties
Variant controls the visual style and the meaning of the message:
Base
Neutral or informational notices — no urgency implied.
Warning
Important information that deserves caution but is not an error.
Error
System errors or problems requiring immediate attention.
Offline
Inform users they are not currently connected to the internet.
Content is the message body. Rich text formatting is supported — bold, italic, and links can be used here.
Icon Name adds a Lightning Design System icon alongside the content. Specify it in the format utility:info. Icon Size controls how large the icon appears: XX-Small, X-Small, Small, Medium, or Large.
Textured applies a subtle texture to the alert background, giving it a more distinctive appearance.
Is Dismissible shows a close button so users can manually dismiss the alert. Enable this when the message is informational and users should be able to move past it.
Styling
The Style tab gives you fine-grained control over the Alert's appearance, overriding the default variant styles. Configure it from the Style tab of the Edit Alert panel.
Controls the outer spacing around the alert, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side of the alert.
Controls the inner spacing between the alert's content (text and icon) and its border.
Top / Bottom / Left / Right: Adjust the inner spacing on each side.
Controls the alert's dimensions.
Width / Height: Set fixed dimensions for the alert.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border surrounding the alert.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Sets the alert's background. Color is set per variant (Base, Warning, Error, Offline).
Color: Set the background color.
Linear Gradient: Apply a gradient background image.
Styles the alert message text. Color is set per variant (Base, Warning, Error, Offline).
Color: Set the text color.
Font Size / Font Style / Font Weight: Control the message typography.
Horizontal Alignment: Align the text within the alert.
Line Clamp: Limit the message to a maximum number of lines.
Styles the icon within the alert. Colors are set per variant (Base, Warning, Error, Offline).
Background Color: Set the icon's background color.
Foreground Color: Set the icon's color.
Foreground Color Close Icon: Set the color of the close (dismiss) icon, when Is Dismissible is enabled.
Last updated
Was this helpful?