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.
Setting Up Your Alert
1. Choose the Alert's Purpose and Style (Variant)
The "Variant" property determines your alert's overall appearance and intended message. Select the variant that best suits the type of notification you want to display:
Base: A neutral style for general information, updates, or non-critical notifications. This is a good choice for providing general context or feedback.
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.
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
2. Add a Visual Cue with an Icon (Optional)
You can add an icon to your alert to visually reinforce the message and make it more noticeable.
How to Add: Select an icon from the components' properties panel options.
Icon Choice: The icon choices will change based on the chosen variant (e.g. a warning icon is more suitable for the warning variant). Choose an icon that is relevant to the alert's message.
3. Apply a Textured Background (Optional)
The "Textured" option adds a subtle texture to the alert's background.
Purpose: This can create a softer, visually distinct appearance compared to a solid background.
When to Use: Consider using a textured background to differentiate alerts from other elements on the page or to add a touch of visual interest
4. Make the Alert Dismissible (Optional)
Enable the "Dismissible" option to allow users to close the alert.
How it Works: A close button ("X") will appear on the alert, allowing users to remove it from the screen.
When to Use: Generally, it is good practice to make alerts dismissible, especially for less critical notifications, so users have control over their experience and can clear the alert once they've acknowledged the message.
Style
Want even more control? Head to the "Style" tab to fine-tune the alert's appearance, overriding the default variant styles. You can adjust colors, fonts, spacing, and more.
Tutorials
The following examples demonstrate some of the available functionality for the Alert component.
Style
The "Style" tab gives you fine-grained control over your alert's appearance. Here's a breakdown of the styling options:
Controls the outer spacing around the alert component, creating space between the alert and other elements on the page.
Top: Adjust the space above the alert.
Right: Adjust the space to the right of the alert.
Bottom: Adjust the space below the alert.
Left: Adjust the space to the left of the alert
Last updated
Was this helpful?
