KS Alerts

There are four types of alerts:

  • Informational (default)
    Use this for a general message
  • Task Completion
    Use this to notify a user that an asynchronous task has completed.
    Uses the CSS modifier .taskComplete.
  • Warning
    Use this to let the user that there is a problem, but not severe enough to merit immediate attention. For example, an asynchronous task completed, but with a few errors that won't affect continued execution.
    Uses the CSS modifier .warning.
  • Error
    Use this in a severe error condition, likely requiring the user's immediate attention. Please use this sparingly, as we don't want to get in to a "boy Who Cried Wolf" situation.
    Uses the CSS modifier .error.

Alerts are positioned in the top-center of the screen by default. Use the following modifiers to reposiiton the alerts elsewhere on the screen:

  • .topRight
  • .topLeft
  • .bottomRight
  • .bottomCenter
  • .bottomLeft

By default, informational and task completion alerts, stay on screen for 10 seconds before automaically dismissing themselves (if the user doesn't dimiss them first), while warnings and errors stay on screen indefinitely until the user dismisses them. This behaviour can be overridden by explicitly specifying the auto-hide attribute to true or false.

The physical alert is represented by an angular directive in the following format:

<ks-alert type="type" position="position" title="title" text="text" auto-hide="null | true | false"></ks-alert>


  • type: taskComplete, warning, or error. If omitted, or if any other value is specified, an informational alert will be generated.
  • position: topRight, topLeft, bottomRight, bottomCenter or bottomLeft. If omitted or if any other value is specified, the alert will be positioned in the top-center of the screen.
  • title: the title of the alert.
  • text: the secondary text of the alert.
  • auto-hide: null to use the default setting for the alert, true to force the alert to automatically dismiss itself, or false to force the alert to stay on screen indefinitely until the user dismisses it. If omitted, the alert will use its default setting.

Alert Demo

Configure the options below to make your own alert examples.



Auto Hide: