Alert
Alerts are notifications of mild to high priority. They may inform the user about events they should know, or explain a problem and point out a solution. They may be triggered by a user action or not.
Examples
Tone of voice
The alert's tone of voice is either info (default), warning, possitive, or critical.
Visible
The Alert can be visible or not. By default, it will render an Alert with the visible property set to false.
Action
You can easily add an action into any Alert using the Anchor component.
onDismiss
Represents the event of click from the alert dismiss button. To use this feature, define the onDismiss property.
Fluid
Represents whether the height is fluid or not on mobile devices. By default its value is true. You can change it setting the fluid property to be either true or false.
Sticky
The Alert can have a sticky border or not. By default, it will render an Alert with the sticky property set to false.
With Icon
You can add an icon on the left side of the Alert. Just use the icon property.
Do’s
- They follow the page's grid, adapting to full 100% width, or centralized over a smaller container, for instance.
- They don't overlap with sidebars. They are contextualized within containers.
- They can’t be placed over the page's header. They are contextualized within containers.
- Provide visible feedback to user actions by using alerts.
- In high priority alerts, completing the task is the main focus. Our role is to assure that the user will solve their problem, by providing enough information to do it, through a clear message and action button.
- Should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
- The user needs to know exactly what happened. Even if we work to assure full SLA, things can fail. There are even some scenarios that are beyond our direct control. Because of this, it’s extremely important that our users understand what is blocking them to finish their tasks.
- Errors must be actionable. As users understand what is happening, we need to give them proper following actions.
- We should always calm the user, not cause more stress.
- Alerts can be stacked.
Alert types
Information
Use this to give instant feedback about the tasks a user just performed. Its main objective is to ensure task confirmation, or notify about further actions. Do not represent alarm or danger, but provide visibility about the system’s operations. Ex. You have 4 new releases to review.
Warning
Use this when user needs to know about some important info before taking any decision. Adds a higher note of urgency over situations that may cause problems to the user’s store, but aren’t yet causing trouble. Ex. Sorry, this account is inactive. Please check your store’s billing for more information.
Danger
Use this when something went wrong after performing an action. Situation should be checked with urgency, since it’s already causing problems to the user’s store, and require manual resolution. This alert isn’t dismissable, and should stay on until the problem is fixed. Ex. Sorry, something went wrong. Please, try again, or refresh your page.
Success
Use this when the user's action had a successful outcome. You can consider using toasts for this situation. Ex. Order successfully placed.
👉 For UX Writing guidelines, access https://uxwriting.vtex.com
Usage
import { Alert } from '@vtex/admin-ui'
function Example() {
return <Alert visible>Order successfully placed</Alert>
}
Props
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| csx | StyleObject | Custom styles | 🚫 | {} |
| icon | ReactNode | Icon to display | 🚫 | - |
| onDismiss | () => void | Action to dispatch on dismiss | 🚫 | - |
| visible | boolean | Whether it is visible or not | 🚫 | false |
| tone | info, positive, warning, or critical | Tone of voice | 🚫 | info |
| children | ReactNode | Component children | 🚫 | - |
| sticky | boolean | Whether it is sticky or not | 🚫 | false |
| fluid | boolean | Whether the height is fluid on mobile devices | 🚫 | true |