Notification

Usage

First of all, add the Notifications component to your app, preferably inside app.vue.

<template>
  <div>
    <UContainer>
      <NuxtPage />
    </UContainer>

    <UNotifications />
  </div>
</template>

Then, you can use the useToast composable to add notifications to your app:

<script setup>
const toast = useToast()
</script>

<template>
  <UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
</template>

This component will render by default the notifications at the bottom right of the screen. You can configure its behaviour in the app.config.ts through ui.notifications:

export default defineAppConfig({
  ui: {
    notifications: {
      // Show toasts at the top right of the screen
      position: 'top-0 right-0'
    }
  }
})

Description

You can add a description in addition of the title.

<UNotification title="Notification" description="This is a notification." />

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.

<UNotification icon="i-heroicons-check-circle" description="This is a notification." />

Avatar

Use the avatar prop as an object and configure it with any of its props.

description

Notification

This is a notification.

<UNotification description="This is a notification." :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }" />

Timeout

Use the timeout prop to configure how long the Notification will remain. Set it to 0 to disable the timeout.

You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused.

<UNotification timeout="60000" />

Color

Use the color prop to change the progress and icon color of the Notification.

<UNotification icon="i-heroicons-x-circle" color="red" />

Click

Use the click prop to execute a function when the Notification is clicked.

<script setup>
const toast = useToast()

function onClick () {
  alert('Clicked!')
}
</script>

<template>
  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: onClick })" />
</template>

Callback

Use the callback prop to execute a function when the Notification expires.

<script setup>
const toast = useToast()

function onCallback () {
  alert('Notification expired!')
}
</script>

<template>
  <UButton label="Show toast" @click="toast.add({ title: 'Expires soon...', timeout: 1000, callback: onCallback })" />
</template>

Close

Use the close-button prop to hide or customize the close button on the Notification.

You can pass all the props of the Button component to customize it through the close-button prop or globally through ui.notification.default.closeButton.

<UNotification :close-button="{ icon: 'i-heroicons-archive-box-x-mark', color: 'primary', variant: 'outline', padded: true, size: '2xs', ui: { rounded: 'rounded-full' } }" />

Actions

Use the actions prop to add actions to the Notification.

<script setup>
const toast = useToast()
</script>

<template>
  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: () => alert('Clicked!') })" />
</template>

Like for closeButton, you can pass all the props of the Button component inside the action or globally through ui.notification.default.actionButton.

<UNotification :actions="[{ variant: 'ghost', color: 'gray', label: 'Action 1' }, { variant: 'solid', color: 'gray', label: 'Action 2' }]" />

Actions will render differently whether you have a description set.

<UNotification :actions="[{ variant: 'solid', color: 'primary', label: 'Action 1' }, { variant: 'outline', color: 'primary', label: 'Action 2' }]" />

Props

Preset

{
  "wrapper": "w-full pointer-events-auto",
  "container": "relative overflow-hidden",
  "title": "text-sm font-medium text-gray-900 dark:text-white",
  "description": "mt-1 text-sm leading-5 text-gray-500 dark:text-gray-400",
  "background": "bg-white dark:bg-gray-900",
  "shadow": "shadow-lg",
  "rounded": "rounded-lg",
  "padding": "p-4",
  "ring": "ring-1 ring-gray-200 dark:ring-gray-800",
  "icon": {
    "base": "flex-shrink-0 w-5 h-5 text-gray-400 dark:text-gray-500",
    "color": "text-{color}-500 dark:text-{color}-400"
  },
  "avatar": {
    "base": "flex-shrink-0 self-center",
    "size": "md"
  },
  "progress": {
    "base": "absolute bottom-0 left-0 right-0 h-1",
    "background": "bg-{color}-500 dark:bg-{color}-400"
  },
  "transition": {
    "enterActiveClass": "transform ease-out duration-300 transition",
    "enterFromClass": "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2",
    "enterToClass": "translate-y-0 opacity-100 sm:translate-x-0",
    "leaveActiveClass": "transition ease-in duration-100",
    "leaveFromClass": "opacity-100",
    "leaveToClass": "opacity-0"
  },
  "default": {
    "color": "primary",
    "icon": null,
    "closeButton": {
      "icon": "i-heroicons-x-mark-20-solid",
      "color": "gray",
      "variant": "link",
      "padded": false
    },
    "actionButton": {
      "size": "xs",
      "color": "white"
    }
  }
}