Alerts

An Alert is a way to notify users without interrupting their actions. Typically, Alerts are to appear at the top of the page. They consist of an icon (in either a success, info, or error state), an area for text, and an optional dismiss button.

Information

  • May have timed visibility (10 seconds) and/or be dismissed by the user by clicking the "x" icon.
  • If the content wraps to a new line the icon on the left should remain vertically centered, but the dismiss icon should remain in place at the top right.

Restrictions

  • Should fill the width of the viewport.
  • The content should be kept short and concise.
  • role="alert" is required so that assistive technology can inform users their attention is needed.

Information Alert

Shows information that is important for a client to read. Information Alerts have a Bell icon.

<div class="sprk-c-Alert" role="alert" data-sprk-alert="container">
  <div class="sprk-c-Alert__icon sprk-c-Alert__icon--info">
    <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 448 512" aria-hidden="true">
      <use xlink:href="#bell"></use>
    </svg>
  </div>

  <div class="sprk-c-Alert__text">
    <p class="sprk-b-TypeBodyOne sprk-u-TextColor--gray-dark">
      This is important information.
    </p>
  </div>

  <button class="sprk-c-Alert__icon sprk-c-Alert__icon--dismiss" type="button" title="Dismiss" data-sprk-alert="dismiss">
    <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 384 512" aria-hidden="true">
      <use xlink:href="#times"></use>
    </svg>
  </button>
</div>

Success Alert

These provide positive feedback to a user's action. Success Alerts have a checkmark icon.

<div class="sprk-c-Alert" role="alert" data-sprk-alert="container">
  <div class="sprk-c-Alert__icon sprk-c-Alert__icon--success">
    <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 512 512" aria-hidden="true">
      <use xlink:href="#check"></use>
    </svg>
  </div>

  <div class="sprk-c-Alert__text">
    <p class="sprk-b-TypeBodyOne sprk-u-TextColor--gray-dark">
      This is a success message.
    </p>
  </div>

  <button class="sprk-c-Alert__icon sprk-c-Alert__icon--dismiss" type="button" title="Dismiss" data-sprk-alert="dismiss">
    <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 384 512" aria-hidden="true">
      <use xlink:href="#times"></use>
    </svg>
  </button>
</div>

Fail Alert

These provide negative feedback to a user's action. Fail Alerts have an exclamation mark icon.

<div class="sprk-c-Alert" role="alert" data-sprk-alert="container">
  <div class="sprk-c-Alert__icon sprk-c-Alert__icon--fail">
    <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 576 512" aria-hidden="true">
      <use xlink:href="#exclamation"></use>
    </svg>
  </div>

  <div class="sprk-c-Alert__text">
    <p class="sprk-b-TypeBodyOne sprk-u-TextColor--gray-dark">
      This is some text that a client needs to read because something failed or went wrong. There is extra text in here to demonstrate the icon placement when the message goes longer than one line. You will notice that the icon to the left stays vertically centered, but the dismiss icon remains in the top right corner. Alerts should never have this much text, though!
    </p>
  </div>

  <button class="sprk-c-Alert__icon sprk-c-Alert__icon--dismiss" type="button" title="Dismiss" data-sprk-alert="dismiss">
    <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 384 512" aria-hidden="true">
      <use xlink:href="#times"></use>
    </svg>
  </button>
</div>