Notification

Create toggleable notifications that fade out automatically.

Usage

The notification will not fade out but remain visible when you hover the message until you stop hovering. You can also close the notification by clicking it. To show notifications, the component provides a simple JavaScript API. The following code snippet gets you started.

JavaScript

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

// Shortcuts
UIkit.notification("My message");
UIkit.notification("My message", status);
UIkit.notification("My message", {
  /* options */
});

Something's not working? Feel free to report an issue or edit this snippet .

<button
  class="demo uk-btn uk-btn-default"
  type="button"
  onclick="UIkit.notification({message: 'Notification message'})"
>
  Click me
</button>

Something's not working? Feel free to report an issue or edit this snippet .

<button
  className="demo uk-btn uk-btn-default"
  type="button"
  onClick={() => {
    window.UIkit.notification({
      message: "Notification message",
    });
  }}
>
  Click me
</button>

HTML message

You can use HTML inside your notification message, like an icon from the Icon component.

UIkit.notification("<uk-icon icon='rocket'></uk-icon> Message");

Something's not working? Feel free to report an issue or edit this snippet .

<button
  class="demo uk-btn uk-btn-default"
  type="button"
  onclick="UIkit.notification({
      message: `<div class='flex items-center'><span class='flex-none mr-2'><uk-icon icon='rocket'></uk-icon></span> Message with an icon</div>`
  })"
>
  With icon
</button>

Something's not working? Feel free to report an issue or edit this snippet .

<button
  className="demo uk-btn uk-btn-default"
  type="button"
  onClick={() => {
    window.UIkit.notification({
      message: `<div class='flex items-center'><span class='flex-none mr-2'><uk-icon icon='rocket'></uk-icon></span> Message with an icon</div>`,
    });
  }}
>
  With icon
</button>

Position

Add one of the following parameters to adjust the notification’s position to different corners.

UIkit.notification("...", { pos: "top-right" });

Position	Code
`top-left`	`UIkit.notification("...", {pos: 'top-left'})`
`top-center`	`UIkit.notification("...", {pos: 'top-center'})`
`top-right`	`UIkit.notification("...", {pos: 'top-right'})`
`bottom-left`	`UIkit.notification("...", {pos: 'bottom-left'})`
`bottom-center`	`UIkit.notification("...", {pos: 'bottom-center'})`
`bottom-right`	`UIkit.notification("...", {pos: 'bottom-right'})`

Something's not working? Feel free to report an issue or edit this snippet .

<div class="flex flex-wrap gap-2">
  <button
    class="uk-btn uk-btn-default"
    type="button"
    onclick="UIkit.notification({message: 'Top Left', pos: 'top-left'})"
  >
    Top Left
  </button>
  <button
    class="uk-btn uk-btn-default"
    type="button"
    onclick="UIkit.notification({message: 'Top Center', pos: 'top-center'})"
  >
    Top Center
  </button>
  <button
    class="uk-btn uk-btn-default"
    type="button"
    onclick="UIkit.notification({message: 'Top Right', pos: 'top-right'})"
  >
    Top Right
  </button>
  <button
    class="uk-btn uk-btn-default"
    type="button"
    onclick="UIkit.notification({message: 'Bottom Left', pos: 'bottom-left'})"
  >
    Bottom Left
  </button>
  <button
    class="uk-btn uk-btn-default"
    type="button"
    onclick="UIkit.notification({message: 'Bottom Center', pos: 'bottom-center'})"
  >
    Bottom Center
  </button>
  <button
    class="uk-btn uk-btn-default"
    type="button"
    onclick="UIkit.notification({message: 'Bottom Right', pos: 'bottom-right'})"
  >
    Bottom Right
  </button>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="flex flex-wrap gap-2">
  <button
    className="uk-btn uk-btn-default"
    type="button"
    onClick={() => {
      window.UIkit.notification({ message: "Top Left", pos: "top-left" });
    }}
  >
    Top Left
  </button>
  <button
    className="uk-btn uk-btn-default"
    type="button"
    onClick={() => {
      window.UIkit.notification({ message: "Top Center", pos: "top-center" });
    }}
  >
    Top Center
  </button>
  <button
    className="uk-btn uk-btn-default"
    type="button"
    onClick={() => {
      window.UIkit.notification({ message: "Top Right", pos: "top-right" });
    }}
  >
    Top Right
  </button>
  <button
    className="uk-btn uk-btn-default"
    type="button"
    onClick={() => {
      window.UIkit.notification({ message: "Bottom Left", pos: "bottom-left" });
    }}
  >
    Bottom Left
  </button>
  <button
    className="uk-btn uk-btn-default"
    type="button"
    onClick={() => {
      window.UIkit.notification({
        message: "Bottom Center",
        pos: "bottom-center",
      });
    }}
  >
    Bottom Center
  </button>
  <button
    className="uk-btn uk-btn-default"
    type="button"
    onClick={() => {
      window.UIkit.notification({
        message: "Bottom Right",
        pos: "bottom-right",
      });
    }}
  >
    Bottom Right
  </button>
</div>

Destructive modifier

UIkit.notification("...", { status: "destructive" });

Something's not working? Feel free to report an issue or edit this snippet .

<button
  class="demo uk-btn uk-btn-default"
  type="button"
  onclick="UIkit.notification({message: 'Destructive message', status: 'destructive'})"
>
  Destructive
</button>

Something's not working? Feel free to report an issue or edit this snippet .

<button
  className="demo uk-btn uk-btn-default"
  type="button"
  onClick={() => {
    window.UIkit.notification({
      message: "Destructive message",
      status: "destructive",
    });
  }}
>
  Destructive
</button>

Close all

You can close all open notifications by calling UIkit.notification.closeAll().

Something's not working? Feel free to report an issue or edit this snippet .

<button
  class="close uk-btn uk-btn-default"
  onclick="UIkit.notification.closeAll()"
>
  Close All
</button>

Something's not working? Feel free to report an issue or edit this snippet .

<button
  className="close uk-btn uk-btn-default"
  onClick={() => {
    window.UIkit.notification.closeAll();
  }}
>
  Close All
</button>

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
`message`	String	`false`	Notification message to show.
`status`	String	`null`	Notification status color.
`timeout`	Number	`5000`	Visibility duration until a notification disappears. If set to `0`, notification will not hide automatically.
`group`	String		Useful, if you want to close all notifications in a specific group.
`pos`	String	`top-center`	Display corner.

JavaScript

Learn more about JavaScript components.

Initialization

This is a Functional Component and may omit the element argument.

UIkit.notification(options);
UIkit.notification(message, status);

Events

The following events will be triggered on elements with this component attached:

Name	Description
`close`	Fires after the notification has been closed.

Methods

The following methods are available for the component:

Close

UIkit.notification(element).close(immediate);

Closes the notification.

Name	Type	Default	Description
`immediate`	Boolean	true	Transition the notification out.

Accessibility

The Notification component automatically sets the appropriate WAI-ARIA role, states and properties.

The notification has the alert role.

On This Page
Usage
HTML message
Position
Destructive modifier
Close all
Component options
JavaScript
Accessibility