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)


This is a sample alert.

To re-open the alert, click here.


<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.
  <p ng-show="alertCtrl.alertClosed">
    To re-open the alert, <a style="cursor: pointer;" ng-click="alertCtrl.openAlert()">click here</a>.
  <div class="form-group">
      Alert type
      <select class="form-control" ng-model="alertCtrl.alertType">
  <div class="form-group">
      <input type="checkbox" bb-check ng-model="alertCtrl.closeable" /> Closeable


/*global angular */

(function () {
    'use strict';

    function AlertTestController() {
        var vm = this;

        vm.alertType = 'warning';

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

        .controller('AlertTestController', AlertTestController);