UIkit 3.x Documentation (as of v3.15.0)

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 class="uk-alert-close" uk-close></a>
</div>

<div uk-alert>
    <a 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 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 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 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 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.

← Align →