When to use

  • The user needs this information, but does not need to take any action. This should be used sparingly, as it interrupts the viewing flow intentionally.

Guidance from the U.S. Web Design System

  • When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human readable language; avoid jargon and computer code.
  • Be polite in error messages — don’t place blame on the user.
  • Users generally won’t read documentation but will read a message that helps them resolve an error; include some educational material in your error message.
  • But don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored.
  • Allow a user to dismiss a notification wherever appropriate.
  • Don’t include notifications that aren’t related to the user’s current goal.

GitHub issues

<div style="padding: 2rem">
    <div class="message message--info">
        Due to the large number of transactions, records begin in 2011.
    </div>
</div>

<div class="slab slab--neutral" style="padding: 2rem">
    <div class="message message--inverse-alt message--info">
        Due to the large number of transactions, records begin in 2011.
    </div>
</div>

<div class="slab slab--primary" style="padding: 2rem; margin-top: 2rem">
    <div class="message message--inverse message--info">
        Due to the large number of transactions, records begin in 2011.
    </div>
</div>

<div class="slab slab--secondary" style="padding: 2rem; margin-top: 2rem">
    <div class="message message--inverse message--info">
        Due to the large number of transactions, records begin in 2011.
    </div>
</div>
<div style="padding: 2rem">
  <div class="message message--info">
    Due to the large number of transactions, records begin in 2011.
  </div>
</div>

<div class="slab slab--neutral" style="padding: 2rem">
  <div class="message message--inverse-alt message--info">
    Due to the large number of transactions, records begin in 2011.
  </div>
</div>

<div class="slab slab--primary" style="padding: 2rem; margin-top: 2rem">
  <div class="message message--inverse message--info">
    Due to the large number of transactions, records begin in 2011.
  </div>
</div>

<div class="slab slab--secondary" style="padding: 2rem; margin-top: 2rem">
  <div class="message message--inverse message--info">
    Due to the large number of transactions, records begin in 2011.
  </div>
</div>
/* No context defined. */
  • Handle: @message-info
  • Preview:
  • Filesystem Path: components/02-components/messages/02-message-info/message-info.html