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 Alert is also available as an Experience Cloud Component.

---

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.

• ErrorUse the error variant when alerting the user to a system error requiring immediate attention.

• Offline: Use the offline alert to inform users that they are not internet-connected.

---

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.

Create a custom branding Alert

Create an error Alert dismissible

---

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.