Alerts

Alerts are elements designed to draw user attention and provide contextual feedback messages.

• Alert component
• Dismissable alerts
• Usage
  • Via data attributes
  • Via javascript
  • Javascript methods
  • Javascript events

Alert component

An alert component is defined by combining an alert class along with one of the 4 contextual classes alert-info, alert-error, alert-warning or alert-success depending on the use case.

Code output

HTML Markup

Copy<div class="alert alert-info">
  <p>This is useful information.</p>
</div>

Copy<div class="alert alert-error">
  <p>This is an error message.</p>
</div>

Copy<div class="alert alert-warning">
  <p>This is a warning message.</p>
</div>

Copy<div class="alert alert-success">
  <p>This is a success message.</p>
</div>

Dismissable alerts

Dismissable alerts allow users to remove them on demand by using the corresponding close button.

Code output

HTML Markup

Copy<div class="alert alert-info alert-dismissable">
  <button data-toggle="dismiss-alert">×</button>
  <p>This is a dismissable information box.</p>
</div>

Copy<div class="alert alert-error alert-dismissable">
  <button data-toggle="dismiss-alert">×</button>
  <p>This is a dismissable error message.</p>
</div>

Copy<div class="alert alert-warning alert-dismissable">
  <button data-toggle="dismiss-alert">×</button>
  <p>This is a dismissable warning message.</p>
</div>

Copy<div class="alert alert-success alert-dismissable">
  <button data-toggle="dismiss-alert">×</button>
  <p>This is a dismissable success message.</p>
</div>

Usage

With some additional markup, alerts can be manipulated using HTML data attributes or Javascript.

Via data attributes

Alerts can be dismissed by adding an alert-dismissable class on an alert component. A button with the data-toggle="dismiss-alert" is also required.

HTML Markup

Copy<div class="alert alert-info alert-dismissable">
  <button data-toggle="dismiss-alert">×</button>
  <p>This is a dismissable information box.</p>
</div>

Via Javascript

Alert components that hold a unique id can be called using Javascript.

Copy$('#id').alert()

Javascript methods

An alert can be dismissed by using the following Javascript method.

Copy$('#id').alert('remove')

Javascript events

The alert component exposes events at specific triggering points to extend component functionality. Each event instance fires as soon as the pre-specified hooks are reached within the Javascript code. The following events are available for the alert component and are linked directly to the alert and not the control triggering elements, like the buttons triggering the alert.

Copy$('#id').on('remove.sky.alert', function(e) {
  // Extend function
});

Copy$('#id').on('removed.sky.alert', function(e) {
  // Extend function
});