This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Alert

Version: 0.131.0

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.

Info Alert

Warning Alert

Positive Alert

Critical Alert

Visible

The Alert can be visible or not. By default, it will render an Alert with the visible property set to false.

ReferenceError: Box is not defined

Action

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

Order successfully placed See order.

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.

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.

ReferenceError: Box is not defined

Sticky

The Alert can have a sticky border or not. By default, it will render an Alert with the sticky property set to false.

Order successfully placed

With Icon

You can add an icon on the left side of the Alert. Just use the icon property.

Info Alert

Positive Alert

Warning Alert

Critical Alert