Alert

Examples

Variants

The alert's tone of voice is either 'info' (default), 'warning', 'possitive', or 'critical'.

Info alert

Warning alert

Positive alert

Critical alert

Action

You can easily add an action into any 'Alert' using the 'Anchor' component.

Order successfully placed

onDismiss

Represents the event of click from the alert dismiss button. To use this feature, define the 'onDismiss' property.

This account is inactive. Check your billing for more information.

Do's

1. They follow the page's grid, adapting to full 100% width, or centralized over a smaller container, for instance.
2. They don't overlap with sidebars. They are contextualized within containers.
3. They can't be placed over the page's header. They are contextualized within containers.
4. Provide visible feedback to user actions by using alerts.
5. 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.
6. Should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
7. 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.
8. Errors must be actionable. As users understand what is happening, we need to give them proper following actions.
9. We should always calm the user, not cause more stress.
10. 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>Order successfully placed</Alert>
}

Props

Name	Type	Description	Required	Default
csx	StyleObject	Custom styles	🚫	{}
onDismiss	() => void	Action to dispatch on dismiss	🚫	-
variant	info, positive, warning, or critical	Tone of voice	🚫	info
children	ReactNode	Component children	🚫	-
action	AlertActionProps	An action that a user can take upon the alert	🚫	{}

• What is this?
• Examples
  • Variants
  • Action
  • onDismiss