December 14, 2017

UIkit Notification

UIkit Notification This component allows us to create notifications in UIkit framework. JavaScript Api UIkit.notification is available to show notification on page.

UIkit Notification Example

Syntax

UIkit.notification({
    message: 'Your Message!',
    status: 'primary',
    pos: 'top-right',
    timeout: 5000
});

Let us first create a very basic notification in UIkit. –

Example:

<button class="demo uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Item Added to cart successfully.'})">Click me</button>

Try it »

Output of above example-

Show Html Message

Sometimes we need to display html messages in notification, you can display html message simply as below-

Example:

UIkit.notification("<span uk-icon='icon: user'></span> Your Message");

Try it »

Close All Notification

If you want to close all notification, you can use the below method.

UIkit.notification.closeAll();

Options

Option	Value	Default	Description
message	String	false	Notification message to be displayed.
status	String	null	Color of notification status, this can be primary, warning, success, danger.
timeout	Integer	5000	Visibility duration until a notification disappears.
group	String	null	Use if you want to disable in specific group.
pos	String	top-center, top-left, top-right, bottom-center, bottom-left, bottom-right	Display corner.