Display success, or error messages.
To apply this component, add the data-uk-alert attribute to a block element.
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.
There are several style modifiers available. Just add one of the following classes to apply a different look.
.uk-alert-danger.uk-alert-warning.uk-alert-success.uk-alert-infoAny 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.
Learn more about JavaScript components.
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. |
The following methods are available for the component:
Closes and removes the Alert.