We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Create toggleable notifications that fade out automatically.
Note If you are not using Tailwind
CSS, you can skip this step. 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
}
}
}),
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.
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 */
});
<button
class="demo uk-button uk-button-default"
type="button"
onclick="UIkit.notification({message: 'Notification message'})"
>
Click me
</button>
You can use HTML inside your notification message, like an icon from the Icon component.
UIkit.notification("<span uk-icon='icon: check'></span> Message");
<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>
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'}) |
<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>
UIkit.notification("...", { status: "danger" });
<button
class="demo uk-button uk-button-default"
type="button"
onclick="UIkit.notification({message: 'Danger message...', status: 'danger'})"
>
Danger
</button>
You can close all open notifications by calling UIkit.notification.closeAll()
.
<button
class="close uk-button uk-button-default"
onclick="UIkit.notification.closeAll()"
>
Close All
</button>
Learn more about using hooks.
Hook Name | Affected 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 | * |
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. |
Learn more about JavaScript components.
This is a Functional Component
and may omit the element argument.
UIkit.notification(options);
UIkit.notification(message, status);
The following events will be triggered on elements with this component attached:
Name | Description |
---|---|
close | Fires after the notification has been closed. |
The following methods are available for the component:
UIkit.notification(element).close(immediate);
Closes the notification.
Name | Type | Default | Description |
---|---|---|---|
immediate | Boolean | true | Transition the notification out. |
The Notification component automatically sets the appropriate WAI-ARIA role, states and properties.
alert
role.