Alerts

Code Examples

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.
  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("alert-info-1", "alert-info-2", "alert-info-1", etc).

Information Alert

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

<div class="sprk-c-Alert sprk-c-Alert--info" role="alert" data-sprk-alert="container" data-id="alert-info-1" data-analytics="object.action.event">
  <div class="sprk-c-Alert__content">
    <svg class="sprk-c-Alert__icon sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--current-color" viewBox="0 0 64 64" aria-hidden="true">
      <use xlink:href="#bell"></use>
    </svg>

    <p class="sprk-b-TypeBodyTwo">
      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 sprk-c-Icon--current-color" viewBox="0 0 64 64" aria-hidden="true">
      <use xlink:href="#close-circle"></use>
    </svg>
  </button>
</div>
          
<sprk-alert alertType="info" idString="alert-info-1" analyticsString="object.action.event">
  This is important information.
</sprk-alert>

Information

See below for available customization options:

Input Type Description
alertType string Can be 'info', 'fail', or 'success'. Will cause the appropriate variant type to render.
dismissible boolean If set to false, the close button will not render. If unset, or set to the default of true then the close button will render. Dismissing does not persist across sessions.
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.
analyticsString string The value supplied will be assigned to the 'data-analytics' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.

Success Alert

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

<div class="sprk-c-Alert sprk-c-Alert--success" role="alert" data-sprk-alert="container" data-id="alert-success-1" data-analytics="object.action.event">
  <div class="sprk-c-Alert__content">
    <svg class="sprk-c-Alert__icon sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--current-color" viewBox="0 0 512 512" aria-hidden="true">
      <use xlink:href="#check-mark"></use>
    </svg>

    <p class="sprk-b-TypeBodyTwo">
      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 sprk-c-Icon--current-color" viewBox="0 0 64 64" aria-hidden="true">
      <use xlink:href="#close-circle"></use>
    </svg>
  </button>
</div>
          
<sprk-alert alertType="success" idString="alert-success-1" analyticsString="object.action.event">
  This is a success message.
</sprk-alert>

Information

The customization options available for the info variant are also available for success alerts.

Fail Alert

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

<div class="sprk-c-Alert sprk-c-Alert--fail" role="alert" data-sprk-alert="container" data-id="alert-fail-1" data-analytics="object.action.event">
  <div class="sprk-c-Alert__content">
    <svg class="sprk-c-Alert__icon sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--current-color" viewBox="0 0 576 512" aria-hidden="true">
      <use xlink:href="#exclamation"></use>
    </svg>

    <p class="sprk-b-TypeBodyTwo">
      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 sprk-c-Icon--current-color" viewBox="0 0 64 64" aria-hidden="true">
      <use xlink:href="#close-circle"></use>
    </svg>
  </button>
</div>
          
<sprk-alert alertType="fail" idString="alert-fail-1" analyticsString="object.action.event">
  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!
</sprk-alert>

Information

The customization options available for the info variant are also available for fail alerts.

Alert With No Dismiss Button

Alerts can be used without the dismiss button. Here is a Success Alert that is not able to be dismissed.

<div class="sprk-c-Alert sprk-c-Alert--no-dismiss sprk-c-Alert--success" role="alert" data-sprk-alert="container" data-id="alert-success-2" data-analytics="object.action.event">
  <div class="sprk-c-Alert__content">
    <svg class="sprk-c-Alert__icon sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 512 512" aria-hidden="true">
      <use xlink:href="#check-mark"></use>
    </svg>

    <p class="sprk-b-TypeBodyTwo">
      This is an Alert
    </p>
  </div>
</div>
          
<sprk-alert alertType="success" dismissible="false" idString="alert-success-2" analyticsString="object.action.event">
  This is an Alert
</sprk-alert>