Tutorialsplane

UIkit Alert


UIkit Alert– UIkit uk-alert component is used to create alert messages such as success, warning and error. It is very simple to use this component. Here in this article we are going to explain how to use alert component in UIkit.


UIkit Alert Component Example

There are following Types of Alert boxes available in UIkit-

  1. Primary
  2. Success
  3. Warning
  4. Danger

Add uk-alert attribute to block element to create alert messages.-

UIkit Alert Component Example:

<div uk-alert="">Your order has been received.</div>

Try it »

If you run the above example it will produce the output something like this-

Close Button

Add class uk-alert-close and attribute uk-close to create close button.

<div uk-alert="">
    
</div>

Primary Alert

Add class uk-alert-primary along with attribute uk-alert.

Primary Alert Example:

<div class="uk-alert-primary" uk-alert="">
    
    <p>Primary Alert Example.</p>
</div>

Try it »

If You run the above example it will produce the output something like this-

Success Alert

Add class uk-alert-success along with attribute uk-alert.

Primary Alert Example:

<div class="uk-alert-success" uk-alert="">
    
    <p>Success Alert Example.</p>
</div>

Try it »

Output of above example will be-

Warning Alert

Add class uk-alert-warning along with attribute uk-alert.

Warning Alert Example:

<div class="uk-alert-success" uk-alert="">
    
    <p>Warning Alert Example.</p>
</div>

Try it »

Output of above example will be-

Danger Alert

Add class uk-alert-danger along with attribute uk-alert.

Danger Alert Example:

<div class="uk-alert-success" uk-alert="">
    
    <p>Danger Alert Example.</p>
</div>

Try it »

Output of above example will be-

Component Options

Option Value Default Description
animation Boolean, String true Fade out.
duration Number 150 Animation duration in milliseconds.
sel-close CSS selector .uk-alert-close The close trigger element.

JavaScript

Initialization

UIkit.alert(element, options);

Events

Methods

Following methods are available-

Close

UIkit.alert(element).close();

Uikit Tutorial

Component