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.-

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

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.

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

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.

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

Output of above example will be-

Warning Alert

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

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

Output of above example will be-

Danger Alert

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

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

Output of above example will be-

Component Options

JavaScript

Initialization

UIkit.alert(element, options);

Events

• beforehide– This event fires before hide.
• hide– Fires when an item is hidden.

Methods

Following methods are available-

Close

UIkit.alert(element).close();