Alert

Display success, or error messages.

FrankenstyleKit (aka Franken UI 3.0) is now available. Support for the current version will gradually wind down. It will continue to work, but using the latest version is recommended for new projects so you can benefit from future updates and enhancements.

Usage
Close button
Destructive modifier
Component options
JavaScript

Usage

To apply this component, add the data-uk-alert attribute to a block element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

Notice

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Destructive modifier

Just add .uk-alert-destructive class to apply a different look.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

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.