Alert
The 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 — informational notices, warnings, errors, or offline states.
Overview
The Alert component communicates contextual feedback in a clear, visually distinct way. Pick a variant to match the type of message, add an optional icon to reinforce it, write your message as rich text, and decide whether users can dismiss it. The sections below follow the configuration panel from top to bottom, so you can read along as you build.
Configuration
To configure the Alert, select it on the canvas. The Edit Alert panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.
Properties
Variant
The Variant setting determines your alert's overall appearance and intended message. Select the variant that best suits the type of notification you want to display:
Base (default): A neutral style for general information, updates, or non-critical notifications. This is a good choice for providing general context or feedback.
Error: A critical style that indicates a serious problem or error that requires immediate attention and action from the user.
Offline: A specific style to inform the user that they have lost their internet connection.
Warning: A more prominent style used to capture the user's attention. Use this for important system messages, cautions, or situations requiring user awareness but not immediate action.
Icon Name
Add an icon to your alert to visually reinforce the message and make it more noticeable. Use the Icon Name setting to pick a Lightning Design System icon. Choose an icon that is relevant to the alert's message — for example, a warning icon pairs naturally with the Warning variant.
Icon Size
The Icon Size setting controls how large the icon appears. Choose from Xxs, Xs, Small (default), Medium, or Large.
Requires: Icon Name to be set.
Content
The Content setting holds the alert's message. It accepts rich text, so you can format the message — bold, links, and more — to suit your needs.
Leave Content empty and the Alert becomes a container: you can drag other Avonni Dynamic Components into it, and they render where the message would be. The two are mutually exclusive. As soon as Content holds any text, that text is shown and the components you dropped in are not rendered, so use one or the other and not both.
Textured
Enable the Textured setting to replace the alert's solid background with a striped pattern. The stripes run diagonally across the whole banner in the variant's own colour, which is a strong visual change rather than a subtle one. Use it when an alert needs to read as different in kind from the rest of the page, not merely different in colour.
Is Dismissible
Enable the Is Dismissible setting to allow users to close the alert. A close button ("X") appears on the alert, letting users remove it from the screen. It is generally good practice to make alerts dismissible, especially for less critical notifications, so users can clear the alert once they've acknowledged the message.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Styling
The Style tab gives you fine-grained control over your 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 component, creating space between the alert and other elements on the page.
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.
Overflow: Control how content that exceeds the bounds is handled.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Customizes the border surrounding the alert.
Color: Set the color of the alert's border.
Size: Adjust the thickness of the border.
Style: Choose a border style (e.g., solid, dashed, dotted).
Radius: Control the roundness of the alert's corners.
Sets the alert's background. Color is set per variant (Base, Warning, Error, Offline).
Color: Set the background color of the alert.
Styles the alert message text. Color is set per variant (Base, Warning, Error, Offline).
Color: Set the color of the alert text.
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?