Alerts
How to add and style alerts.
What Is An Alert?
Alerts are visual notifications that inform users about important messages, events, or actions that require their attention. These notifications are typically displayed prominently on the page to ensure that users notice them. Alerts communicate critical information or prompt users to take specific actions.
Location in the Parts Library: Base Parts > Feedback > Alert
Adding An Alert
If you simply want to display an alert within your content to draw attention, then choose the alert most closely aligned with what you need from the Parts Library.
Choose your preferred alert variation, select the part where you’d like to add the alert, and click ‘+ add to page’.
Editing and Styling An Alert
Like many other parts, borders, shadow, opacity, rounding, and spacing can be applied using the property editor on the right, once the alert has been selected.
The text within the alert is edited the same as the way text is edited in other parts, using both the Text Editor and the Font Editor in the property editing panel on the right.
Adding a Background Image to An Alert
To add a background image to your alert, select the alert, then go to the property editor in the right panel. Go to 'Image', then choose your preferred image from the Media Gallery or upload a new image. You can then adjust the opacity of the background image within the Decoration Editor as needed.
Changing or Removing the Icon
Alerts come with an icon. This icon can be removed or replaced with another icon.
To remove the icon, select it, and then delete it using the trashcan icon in the right property panel.
To change the icon, select it, and then in the right property panel go to Icon > Value Set, and select your preferred icon.
Colors
Alerts can have your choice of colors including background colors, foreground colors, and color gradients. Just select the alert, then go to the Color Editor in the property panel on the right.
Some 'standard' colors are often associated with alerts, which are available in the color picker.
Setting Up An Alert Triggered By A Process
Alerts can be set up so they are triggered by an event or process. An example of this could be an alert that a function has been completed, such as adding an item to a cart; logging out, or an email sent. Alerts could also be set up if there is a failure within a process.
Related Information
Last updated
Was this helpful?