Skip to Main Content

Alerts

About Alerts

A description for this component is coming soon! You can check out the code below in the meantime.

More Info   See Examples   Changelog

Alert Accessibility

A description of how this component is accessible is on its way!

Code Snippet

Detailed Information

Types of Alerts

<div data-c-alert="information"></div>

The information argument specifies that the alert will use the information colour palette (chosen by variable). This alert is useful for displaying non-critical information to the user.

<div data-c-alert="warning"></div>

The warning argument specifies that the alert will use the warning colour palette (chosen by variable). This alert is useful for indicating to the user that they should be aware of something specific.

<div data-c-alert="error"></div>

The error argument specifies that the alert will use the error colour palette (chosen by variable). This alert is useful to indicate an interface error to the user.

Other Arguments

<div data-c-alert="TYPE(toast)"></div>

The toast argument changes the way the alert is displayed and fixes it to the bottom right corner of the viewport. This is useful for displaying system information to the user that might relate to interface that is off screen.

Examples

Optional Alert Title

This is a sample informative alert. These alerts are used to display non-critical information to the user.

Optional Alert Title

This is a sample warning alert. These alerts are used to display user interface warnings and system alerts.

This is a sample error alert. These alerts are used to display critical system and form errors.

Changelog

Version 2.4.11

Version 2.4.8

Version 2.3.12

Version 2.3.3