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.
Shows information that is important for a client to read. Information Alerts have a Bell icon.
This is important information.
<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>
<sprk-alert alertType="info">
This is important information.
</sprk-alert>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 true, will render the close icon and allow the alert to be dismissable. Dismissing does not persist across sessions. |
These provide positive feedback to a user's action. Success Alerts have a checkmark icon.
This is a success message.
<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>
<sprk-alert alertType="success">
This is a success message.
</sprk-alert>The customization options available for the info variant are also available for success alerts.
These provide negative feedback to a user's action. Fail Alerts have an exclamation mark icon.
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!
<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>
<sprk-alert alertType="fail">
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>The customization options available for the info variant are also available for fail alerts.