Feedback messages communicate status.
Messages come in three varieties based on urgency.
Informational messages communicate non-critical information.
<div class="spirit-form__message spirit-form__message--info">
<div class="spirit-form__message-icon-wrap">
<svg aria-label="help-circle" class="spirit-icon spirit-form__message-icon" aria-hidden="true">
<use xlink:href="/icons/spirit.svg#help-circle">
</use>
</svg>
</div>
<div class="spirit-form__message-text"> Only 21 seats remaining. </div>
</div>
Success messages communicate that a user action was successful.
<div class="spirit-form__message spirit-form__message--success">
<div class="spirit-form__message-icon-wrap">
<svg aria-label="check-circle" class="spirit-icon spirit-form__message-icon" aria-hidden="true">
<use xlink:href="/icons/spirit.svg#check-circle">
</use>
</svg>
</div>
<div class="spirit-form__message-text"> Donation received! Thank you for your support. </div>
</div>
If a user task doesn’t end with a page dedicated to confirming success, then use a success message to clearly communicate that their task ended successfully.
Error messages communicate critical information.
<div class="spirit-form__message spirit-form__message--error">
<div class="spirit-form__message-icon-wrap">
<svg aria-label="alert-circle" class="spirit-icon spirit-form__message-icon" aria-hidden="true">
<use xlink:href="/icons/spirit.svg#alert-circle">
</use>
</svg>
</div>
<div class="spirit-form__message-text"> The form contains errors. Correct them to continue. </div>
</div>
Use error messages for form validation errors and whenever the user’s path is blocked.
Class | Applies to | Outcome |
---|---|---|
|
|
Applies informational style |
|
|
Applies success style |
|
|
Applies error style |