Feedback Messages

Feedback messages communicate status.

Messages come in three varieties based on urgency.

Variations

Informational Messages

Informational messages communicate non-critical information.

Only 21 seats remaining.

Visit jdrf.org for more information.

Code Copied

Copy Code

<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">
        <p>Only 21 seats remaining.</p>
        <p>Visit <a href="#">jdrf.org</a> for more information.</p>
    </div>
</div>

Success Messages

Success messages communicate that a user action was successful.

Donation received! Thank you for your support.

Code Copied

Copy Code

<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">
        <p>Donation received! Thank you for your support.</p>
    </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

Error messages communicate critical information.

The form contains errors. Correct them to continue.

Code Copied

Copy Code

<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">
        <p>The form contains errors. Correct them to continue.</p>
    </div>
</div>

Use error messages for form validation errors and whenever the user’s path is blocked.

Guidelines

Use sentence case and end messages with a period.
Use a link within the message to provide the user with more information about a message. Use links sparingly here.
Use bullets to list individual errors or steps toward recovery. In form validation, prefer instructions as error messages on each input instead of a list in a feedback message.

CSS Reference

Class	Applies to	Outcome
`.spirit-form__message--info`	`.spirit-form__message`	Applies informational style
`.spirit-form__message--success`	`.spirit-form__message`	Applies success style
`.spirit-form__message--error`	`.spirit-form__message`	Applies error style