Alert

An Alert Message is a design system component that provides users with critical information or feedback about their interaction with the application. It typically appears as a prominent, styled box containing a message, often accompanied by an icon to indicate the type of alert, such as success, error, warning, or information. Alert messages are designed to capture attention and convey important updates or issues that require user awareness or action.

Component Status

Figma

Up to date

Status

Stable

HTML

Available

React

Available

Twig

Available

Correct usage of Alert and Toast Components

Alert is intended to be a static notification directly related to a specific section or context. It is not meant to be used as a standalone element but as a supplement to a larger content block. Depending on its purpose, it can either remain on the page or disappear after the page is reloaded.

Toast is designed to be an easy-to-spot notification that appears above any content. It should be noticeable every time it pops up, even repeatedly. The ideal setup is to let it disappear automatically after a set amount of time, so no user interaction is required.

 

 

© 2024 Spirit. Page last updated on Nov 27, 2024, 17:39