Alerts

Code Examples

An Alert is a way to notify users without interrupting their actions. 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).

Configurable Variables

Variable Default Description
$sprk-alert-border-radius 4px Sets the border-radius.
$sprk-alert-border 1px solid $sprk-gray Sets the border surrounding the alert.
$sprk-alert-border-info 1px solid $sprk-blue Sets the border surrounding the information alert.
$sprk-alert-border-success 1px solid $sprk-green Sets the border surrounding the success alert.
$sprk-alert-border-fail 1px solid $sprk-yellow Sets the border surrounding the failure alert.
$sprk-alert-color $sprk-black Sets the color property of the alert.
$sprk-alert-text-color-info $sprk-black Sets the color property of the information alert.
$sprk-alert-icon-color-info $sprk-blue Sets the icon color of the information alert.
$sprk-alert-text-color-success $sprk-black Sets the color property of the success alert.
$sprk-alert-icon-color-success $sprk-green Sets the icon color of the success alert.
$sprk-alert-text-color-fail $sprk-black Sets the color property of the failure alert.
$sprk-alert-icon-color-fail $sprk-yellow Sets the icon color of the failure alert.
$sprk-alert-bg-color $sprk-white Sets the background color of the base alert.
$sprk-alert-bg-color-success rgb(237, 253, 251) Sets the background color of the success alert.
$sprk-alert-bg-color-info rgb(241, 250, 255) Sets the background color of the information alert.
$sprk-alert-bg-color-fail rgb(255, 248, 232) Sets the background color of the fail alert.
$sprk-alert-dismiss-icon-color $sprk-black The color of the dismiss icon.
$sprk-alert-font-size 1rem The size of the text in the content area.
$sprk-alert-font-weight 400 The weight of the text in the content area.
$sprk-alert-line-height 1.5 The line height of the text in the content area.
$sprk-alert-icon-size 40px Sets the height and width of the two icons used in the alert.
$sprk-alert-shadow 0 3px 10px 1px rgba(0, 0, 0, 0.08) Sets the box shadow of the alert.
$sprk-alert-content-padding $sprk-space-m $sprk-space-m $sprk-space-m $sprk-space-misc-a Sets the padding around the main content icon and message.
$sprk-alert-dismiss-padding $sprk-space-m Sets the padding around the dismiss icon.
$sprk-alert-icon-margin 0 $sprk-space-misc-a 0 0 Sets the margin for the icon in the alert.

Class Modifiers

Class Description
.sprk-c-Alert--info Styles the alert as an information alert.
.sprk-c-Alert--success Styles the alert as a success alert.
.sprk-c-Alert--fail Styles the alert as a failure alert.
.sprk-c-Alert__icon--dismiss Adds specific styles to the icon that is used for closing the alert.

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-c-Alert__text">
      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-c-Alert__text">
      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-c-Alert__text">
      This is a failure message to alert that something was not successful.
    </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--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-c-Alert__text">
      This success alert has no dismiss button.
    </p>
  </div>
</div>
          
<sprk-alert alertType="success" dismissible="false" idString="alert-success-2" analyticsString="object.action.event">
  This is an Alert
</sprk-alert>