Messages

Messaging is used to communicate important information related to a screen, section of a screen, or specific form field. Messages may appear by default, in real-time as the user performs an action (client-side) or after the user submits information (server-side).

Page-Level Success Message Example

Success-style message title

Some message to explain in further detail.


When to Use

  • Use real-time messaging in forms when possible. This prevents the user from making an error and saves the user time. Real-time messaging should always be used to communicate formatting rules. For example: email format.
  • Use server-side messaging only when submitting data is necessary to determine the error state.

When Not to Use

  • Do not use messaging to call attention to system issues that have no impact on the user’s decision-making and/or ability to proceed.

Variations

Variations

Page Level Messages

Page level messages appear at the top of the page and are used for messages pertaining to the overall page content.

Success

Success-style message title

Some message to explain in further detail.


When to Use

  • Use success messaging to inform the user that they have corrected information that was previously causing an error to display.
  • Success messaging may also be to confirm that a requested action was completed.
  • Use success messaging to provide encouragement to users when appropriate.

Warning

Warning-style message title

Some message to explain in further detail.


When to Use

  • Use warning messages to communicate problems that may affect the user’s experience.
  • Use warning messages when the user has made selections that appear to be incorrect or in conflict with other data.

Error

Error-style message title

Some message to explain in further detail.


When to Use

  • Use error messages to communicate problems that require the user to correct information before moving forward. For real-time messaging, display errors in the context of the field itself. For server-side messaging, it is recommended that a message appear at the top of the screen and at the field level. Shorter forms may omit the top-of-screen message as long as the required action is very apparent to the user.
  • Error messages may also be used to communicate system errors that prevent the user from proceeding down the current path.

Info

Info-style message title

Some message to explain in further detail.


When to Use

  • Use info messages to communicate information that does not have an explicit positive or negative association. These are most often displayed in the context of an overall screen or panel, rather than at a field level.

Container-Level Messages

Container-Level messages appear within a panel, tabbed set or other content container.

Success

Success-style message title. Some message to explain in further detail.


Warning

Warning-style message title. Some message to explain in further detail.


Error

Error-style message title. Some message to explain in further detail.


Info

Info-style message title. Some message to explain in further detail.


Field Level Messages

Field level messages appear within a form element and communicates validation information. See the specific form elements for details about field-level validation: - Text Input - Select - Checkboxes - Radio Buttons

Developer Notes

Messages are created by adding the .spark-message class to an element. For inline messages, there should be an icon with the class of .spark-message__icon and a content element with the class of .spark-message__content. These are displayed horizontally using flexbox.

For page level messages, a class of .spark-message--lg should be added. This will increase the size of the icon. Larger message heading text can be created by adding the .spark-message__heading class.

Message Types

  • Add a class of .spark-message--success to display a success message.
  • Add a class of .spark-message--warning to display a warning message.
  • Add a class of .spark-message--error to display an error message.
  • Add a class of .spark-message--info to display an info message.

Page Level

Success

Success-style message title

Some message to explain in further detail. 

<div class="spark-message spark-message--lg spark-message--success spark-panel">
  <div class="spark-panel__content">
    <i class="spark-message__icon spark-icon-check spark-icon--fill"></i>
    <div class="spark-message__content">
      <h4 class="spark-message__heading">
        Success-style message title
      </h4>
      <p>
        Some message to explain in further detail.
      </p>
    </div>
  </div>
</div>

Warning

Warning-style message title

Some message to explain in further detail. 

<div class="spark-message spark-message--lg spark-message--warning spark-panel">
  <div class="spark-panel__content">
    <i class="spark-message__icon spark-icon-alert-triangle spark-icon--fill"></i>
    <div class="spark-message__content">
      <h4 class="spark-message__heading">
        Warning-style message title
      </h4>
      <p>
        Some message to explain in further detail.
      </p>
    </div>
  </div>
</div>

Error

Error-style message title

Some message to explain in further detail. 

<div class="spark-message spark-message--lg spark-message--error spark-panel">
  <div class="spark-panel__content">
    <i class="spark-message__icon spark-icon-ban spark-icon--fill"></i>
    <div class="spark-message__content">
      <h4 class="spark-message__heading">
        Error-style message title
      </h4>
      <p>
        Some message to explain in further detail.
      </p>
    </div>
  </div>
</div>

Info

Info-style message title

Some message to explain in further detail. 

<div class="spark-message spark-message--lg spark-message--info spark-panel">
  <div class="spark-panel__content">
    <i class="spark-message__icon spark-icon-note spark-icon--fill"></i>
    <div class="spark-message__content">
      <h4 class="spark-message__heading">
        Info-style message title
      </h4>
      <p>
        Some message to explain in further detail.
      </p>
    </div>
  </div>
</div>

Inline

Success

Success-style message title. Some message to explain in further detail. 

<div class="spark-message spark-message--success">
  <i class="spark-message__icon spark-icon-check spark-icon--fill"></i>
  <p class="spark-message__content">
    <b>Success-style message title.</b> Some message to explain in further detail.
  </p>
</div>

Warning

Warning-style message title. Some message to explain in further detail. 

<div class="spark-message spark-message--warning">
  <i class="spark-message__icon spark-icon-alert-triangle spark-icon--fill"></i>
  <p class="spark-message__content">
    <b>Warning-style message title.</b> Some message to explain in further detail.
  </p>
</div>

Error

Error-style message title. Some message to explain in further detail. 

<div class="spark-message spark-message--error">
  <i class="spark-message__icon spark-icon-ban spark-icon--fill"></i>
  <p class="spark-message__content">
    <b>Error-style message title.</b> Some message to explain in further detail.
  </p>
</div>

Info

Info-style message title. Some message to explain in further detail. 

<div class="spark-message spark-message--info">
  <i class="spark-message__icon spark-icon-note spark-icon--fill"></i>
  <p class="spark-message__content">
    <b>Info-style message title.</b> Some message to explain in further detail.
  </p>
</div>

Field Level

Field level messages appear within a form element and communicates validation information. See the specific form elements for details about field-level validation: - Text Input - Select - Checkboxes - Radio Buttons