Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

For proper styling, use the alert class in addition to one of the four required contextual classes:

• .alert--success-color
• .alert--error-color
• .alert--warning-color
• .alert--info-color

Additionally, use role="alert" so the browser can send out an accessible alert event to assistive technology products which can then notify the user about it.

If you also want the alert to contain a link, use the class .alert--link on the a tag.

Be sure to also check out the Icons page to see what icons are available.

To utilize, Insert an alert-specific atom partial called "AlertAtom" via an Html Helper Extension method.

@Html.AlertAtom(AlertTypeEnum.Base, "testAlert")

Alert Atom requires you specify a type via a "AlertTypeEnum" specification like "AlertTypeEnum.Success". You will also need to provide an Id, however, all other parameters are optional. Provide optional parameters by entering the parameter name followed by ':' and the value.

@Html.AlertAtom(AlertTypeEnum.Success, "SuccessAlert", customClass: "testAlert", title: "This is a test alert")