Tutorialsplane

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">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.

Uikit Tutorial

Component