Alert
Display success, warning and error messages.
Usage
To apply this component, add the uk-alert attribute to a block element.
<div uk-alert></div><div uk-alert>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
Close button
To create a close button and enable its functionality, add the .uk-alert-close class to a <button> or <a> element inside the alert box. To apply a close icon, add the uk-close attribute from the Close component.
<div uk-alert>
<a href class="uk-alert-close" uk-close></a>
</div><div uk-alert>
<a href class="uk-alert-close" uk-close></a>
<h3>Notice</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>Style modifiers
There are several style modifiers available. Just add one of the following classes to apply a different look.
| Class | Description |
|---|---|
.uk-alert-primary |
Give the message a prominent styling. |
.uk-alert-success |
Indicates success or a positive message. |
.uk-alert-warning |
Indicates a message containing a warning. |
.uk-alert-danger |
Indicates an important or error message. |
<div class="uk-alert-primary" uk-alert>
<a href class="uk-alert-close" uk-close></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div class="uk-alert-success" uk-alert>
<a href class="uk-alert-close" uk-close></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div class="uk-alert-warning" uk-alert>
<a href class="uk-alert-close" uk-close></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div class="uk-alert-danger" uk-alert>
<a href class="uk-alert-close" uk-close></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>Component options
Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more
| Option | Value | Default | Description |
|---|---|---|---|
animation |
Boolean | true |
Fade out or hide directly. |
duration |
Number | 150 |
Animation duration in milliseconds. |
sel-close |
CSS selector | .uk-alert-close |
The close trigger element. |
animation is the Primary option and its key may be omitted, if it's the only option in the attribute value.
<span uk-toggle=".my-class"></span>JavaScript
Learn more about JavaScript components.
Initialization
UIkit.alert(element, options);Events
The following events will be triggered on elements with this component attached:
| Name | Description |
|---|---|
beforehide |
Fires before an item is hidden. Can prevent hiding by calling preventDefault() on the event. |
hide |
Fires after an item is hidden. |
Methods
The following methods are available for the component:
Close
UIkit.alert(element).close();Closes and removes the Alert.