AX - Alert
Overview
AX - Alert is an Experience Cloud component that displays important messages and notifications to portal users on Experience Sites pages.
Use it to show system alerts, error messages, warnings, success confirmations, or time-sensitive announcements. Control when alerts appear, what they say, and how they look—all configured in Experience Builder without code.
Perfect for portal maintenance notices, form submission confirmations, account status alerts, or guiding users through processes on customer or partner portals.
Settings
Variant
The 'variant' attribute allows you to customize the appearance of the Avonni Alert component to reflect better the type of alert you're conveying. Available variants include:
error: For critical notifications or issues.base: A standard, general-purpose alert.offline: Indicates connectivity or availability concerns.warning: For alerts that need attention but aren't critical.
Choose a variant that aligns with the message you aim to deliver for more transparent user comprehension.
Content
The 'content' attribute specifies the primary message or information you wish to convey in the Avonni Alert component. It holds the textual content that will be displayed within the alert, ensuring users are informed or made aware of the specific notification or situation.
Icon Name
The 'icon name' attribute allows you to set a specific icon for the Avonni Alert component. By providing an icon name, you can visually represent the nature or context of the alert, enhancing clarity and immediately drawing the user's attention to the message.
Icon Size
The 'icon size' attribute in the Avonni Alert component controls the icon's size:
Xxs: Extra-extra-small for subtle emphasis.
Xs: Extra-small for minimal prominence.
Small: A modest size for moderate visibility.
Medium: Standard size for balanced visibility.
Large: For maximum visual impact
Is Dismissible
The "Is Dismissible" attribute enables users to close or dismiss the Avonni Alert on the interface. When activated, a close button appears on the alert, allowing for manual removal by the user.
Spacing
The spacing styling setting in the Avonni Alert component lets you adjust margins:
Block Start: Set the top margin.
Block End: Adjust the bottom margin.
Inline Start: Configure the left margin.
Inline End: Modify the right margin
Background
The background styling setting in the Avonni Alert component provides backdrop customization:
Color: Select a solid color for the background.
Linear Gradient: Choose this option for a dynamic, visually appealing gradient effect
Text
The text styling setting in the Avonni Alert component allows for text customization:
Color: Change the text color for improved visibility.
Font Weight: Choose the weight of the font for emphasis.
Horizontal Alignment: Select the text's alignment for optimal display in the alert
Border
The border styling setting in the Avonni Alert component offers options to customize the border's appearance:
Color: Choose a color for the border's edge.
Size: Select the thickness of the border.
Style: Determine the overall look and feel with various styles
Icon
The icon styling setting in the Avonni Alert component allows for various customizations of the icon's appearance:
Background Color: Alter the background color behind the icon.
Foreground Color: Change the main color of the icon.
Foreground Close Icon: Specify the icon's color to close the alert.
Foreground Color Utility: Make further color adjustments for better visibility and contrast
Last updated
Was this helpful?