Notification

Create toggleable notifications that fade out automatically.

Table of contents

• Usage
  • JavaScript
• HTML message
• Position
• Destructive modifier
• Close all
• Component options
• JavaScript
  • Initialization
  • Events
  • Methods
• Accessibility

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

HTML message

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

Position

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

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'})

Destructive modifier

Close all

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

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.

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

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.