Warning: This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. For more information, see developer.blackbaud.com/skyux.

Alert

The alert component displays a SKY UX-themed Bootstrap alert. It includes an option to let users dismiss the alert with a close button. For information about the Bootstrap alert, see the Bootstrap documentation.

Alert settings

  • bb-alert — Creates a SKY UX-themed Bootstrap alert.
    • bb-alert-type — Specifies a style for the alert. The valid options are success, info, warning, and danger. (Default: warning)
    • bb-alert-closeable(Optional.) Specifies a Boolean value to indicate whether users can dismiss the alert. (Default: false)
    • bb-alert-closed(Optional.) For alerts that are closeable, indicates whether the alert is closed. (Default: false)

Demo

This is a sample alert.

To re-open the alert, click here.

Markup

<div ng-controller="AlertTestController as alertCtrl">
  <bb-alert bb-alert-type="{{alertCtrl.alertType}}" bb-alert-closeable="{{alertCtrl.closeable}}" bb-alert-closed="alertCtrl.alertClosed">
    This is a sample alert.
  </bb-alert>
  <p ng-show="alertCtrl.alertClosed">
    To re-open the alert, <a style="cursor: pointer;" ng-click="alertCtrl.openAlert()">click here</a>.
  </p>
  <div class="form-group">
    <label>
      Alert type
      <select class="form-control" ng-model="alertCtrl.alertType">
        <option>info</option>
        <option>success</option>
        <option>warning</option>
        <option>danger</option>
      </select>
    </label>
  </div>
  <div class="form-group">
    <label>
      <input type="checkbox" bb-check ng-model="alertCtrl.closeable" /> Closeable
    </label>
  </div>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function AlertTestController() {
        var vm = this;

        vm.alertType = 'warning';

        vm.openAlert = function () {
            vm.alertClosed = false;
            return false;
        };
    }

    angular.module('stache')
        .controller('AlertTestController', AlertTestController);
}());