Alert
Display success, or error messages.
Table of contents
Usage
To apply this component, add the data-uk-alert attribute to a block element.
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 data-uk-close attribute from the Close component.
Destructive modifier
Just add .uk-alert-destructive class to apply a different look.
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.
JavaScript
Learn more about JavaScript components.
Initialization
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
Closes and removes the Alert.