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 */
});
Copy to clipboard
  • <button
      class="demo uk-button uk-button-default"
      type="button"
      onclick="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("<span uk-icon='icon: check'></span> Message");
Copy to clipboard
  • <button
      class="demo uk-button uk-button-default"
      type="button"
      onclick="UIkit.notification({
          message: `<div class='uk-flex uk-flex-middle'><span class='uk-flex-none uk-margin-small-right' uk-icon='icon: check; ratio: 0.8'></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" });
PositionCode
top-leftUIkit.notification("...", {pos: 'top-left'})
top-centerUIkit.notification("...", {pos: 'top-center'})
top-rightUIkit.notification("...", {pos: 'top-right'})
bottom-leftUIkit.notification("...", {pos: 'bottom-left'})
bottom-centerUIkit.notification("...", {pos: 'bottom-center'})
bottom-rightUIkit.notification("...", {pos: 'bottom-right'})
Copy to clipboard
  • <p uk-margin>
      <button
        class="uk-button uk-button-default"
        type="button"
        onclick="UIkit.notification({message: 'Top Left', pos: 'top-left'})"
      >
        Top Left
      </button>
      <button
        class="uk-button uk-button-default"
        type="button"
        onclick="UIkit.notification({message: 'Top Center', pos: 'top-center'})"
      >
        Top Center
      </button>
      <button
        class="uk-button uk-button-default"
        type="button"
        onclick="UIkit.notification({message: 'Top Right', pos: 'top-right'})"
      >
        Top Right
      </button>
      <button
        class="uk-button uk-button-default"
        type="button"
        onclick="UIkit.notification({message: 'Bottom Left', pos: 'bottom-left'})"
      >
        Bottom Left
      </button>
      <button
        class="uk-button uk-button-default"
        type="button"
        onclick="UIkit.notification({message: 'Bottom Center', pos: 'bottom-center'})"
      >
        Bottom Center
      </button>
      <button
        class="uk-button uk-button-default"
        type="button"
        onclick="UIkit.notification({message: 'Bottom Right', pos: 'bottom-right'})"
      >
        Bottom Right
      </button>
    </p>

Danger modifier

UIkit.notification("...", { status: "danger" });
Copy to clipboard
  • <button
      class="demo uk-button uk-button-default"
      type="button"
      onclick="UIkit.notification({message: 'Danger message', status: 'danger'})"
    >
      Danger
    </button>

Close all

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

Copy to clipboard
  • <button
      class="close uk-button uk-button-default"
      onclick="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

OptionValueDefaultDescription
message StringfalseNotification message to show.
statusStringnullNotification status color.
timeoutNumber5000Visibility duration until a notification disappears. If set to 0, notification will not hide automatically.
groupStringUseful, if you want to close all notifications in a specific group.
posStringtop-centerDisplay 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:

NameDescription
closeFires after the notification has been closed.

Methods

The following methods are available for the component:

Close

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

Closes the notification.

NameTypeDefaultDescription
immediateBooleantrueTransition the notification out.

Accessibility

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

  • The notification has the alert role.

Theme development

On your tailwind.config.js file, add the Notification component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        notification: {
            hooks: {},
            media: true
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-notification.uk-notification
hook-message.uk-notification-message
hook-close.uk-notification-close
hook-close-hover.uk-notification-message:hover .uk-notification-close
hook-primary.uk-notification-message-primary
hook-success.uk-notification-message-success
hook-warning.uk-notification-message-warning
hook-danger.uk-notification-message-danger
hook-misc*