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-3", 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 32px 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 24px $sprk-space-m $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.
$sprk-alert-dismiss-icon-size 25px The size of the dismiss icon.

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--stroke-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--stroke-current-color"
     viewBox="0 0 64 64"
     aria-hidden="true"
    >
      <use xlink:href="#close"></use>
      </svg>
      </button>
      </div>
          
<sprk-alert
 alertType="info"
 idString="alert-info-1"
 analyticsString="object.action.event"
>
  This is important information.
  </sprk-alert>
<SprkAlert
 message="This is important information."
 onDismiss={()=
> { this.setState({ isVisibleInfoAlert: false }); }} isVisible={this.state.isVisibleInfoAlert} variant="info" idString="alert-info-1" analyticsString="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.

Information

See below for available customization options:

Prop Type Description
variant String Can be 'info', 'fail', or 'success'. Will cause the appropriate variant type to render.
isVisible Boolean This determines whether to render the alert. Change the value of this prop to true to show the alert or false to hide the alert.
message String The paragraph content for the alert message.
isDismissible 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 dismiss button. This is intended to be used as a selector for automated tools. This value should be unique per page.
additionalClasses String Allows a string of classes to add, in addition to the component classes. Intended for overrides.
onDismiss Function A function that is called when the dismiss button is clicked. This function should toggle the isVisible state that is passed to the isVisible prop.
iconNameDismiss String Allows a custom icon name to be used for the dismiss button. The default is set to use the Spark 'close' icon.
iconNameSuccess String Allows a custom icon name to be used for the success alert. The default is set to use the Spark 'check-mark' icon.
iconNameInfo String Allows a custom icon name to be used for the info alert. The default is set to use the Spark 'bell' icon.
iconNameFail String Allows a custom icon name to be used for the fail alert. The default is set to use the Spark 'exclamation' icon.

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--stroke-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--stroke-current-color"
     viewBox="0 0 64 64"
     aria-hidden="true"
    >
      <use xlink:href="#close"></use>
      </svg>
      </button>
      </div>
          
<sprk-alert
 alertType="success"
 idString="alert-success-1"
 analyticsString="object.action.event"
>
  This is a success message.
  </sprk-alert>
<SprkAlert
 message="This is a success message."
 onDismiss={()=
> { this.setState({ isVisibleSuccessAlert: false }); }} isVisible={this.state.isVisibleSuccessAlert} variant="success" idString="alert-success-1" analyticsString="alert" />

Information

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

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--stroke-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--stroke-current-color"
     viewBox="0 0 64 64"
     aria-hidden="true"
    >
      <use xlink:href="#close"></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>
<SprkAlert
 message="This is a failure message to alert that something was not successful."
 onDismiss={()=
> { this.setState({ isVisibleFailAlert: false }); }} isVisible={this.state.isVisibleFailAlert} variant="fail" idString="alert-fail-1" analyticsString="alert" />

Information

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

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 sprk-c-Icon--stroke-current-color"
     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>
<SprkAlert
 isVisible={this.state.isVisible}
 message="This success alert has no dismiss button."
 variant="success"
 idString="alert-4"
 isDismissible={false}
/>