Skip to main content
Version: 2.0.0

Alert

Alerts allow you to display a contextual message about your users actions. These are available in several shapes, colors and sizes.

For more informations on the icons used, consult the dedicated page.

Basic usage

An alert simply contains a root tag with the class .ms-alert, and a paragraph.

Live Editor
Result
Loading...

To adapt your button to your content, several colors are available.

Live Editor
Result
Loading...

Close

A cross can be added via the class .ms-close, it will be positioned on the top right corner.

Live Editor
Result
Loading...

Sizes

In order to adapt the alerts to your content, it is possible to display them in different sizes with classes .ms-small, .ms-medium and .ms-large.

Live Editor
Result
Loading...

It is possible to extend the alert to 100% of the width with the classe .ms-fullwith.

Live Editor
Result
Loading...

Light alerts

Alerts can also have a more discret background, using the .ms-light classe.

Live Editor
Result
Loading...