ui/docs/content/5.overlays/6.notification.md

github, description

github	description
true	Display a toast notification in your app.

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:

::component-example #default :notification-example-basic #code

<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.

::component-card

baseProps: id: 2 timeout: 0 props: 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}.

::component-card

baseProps: id: 3 timeout: 0 title: 'Notification' props: icon: 'i-heroicons-check-circle' description: 'This is a notification.' excludedProps:

• icon

---

::

Avatar

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

::component-card

baseProps: id: 4 timeout: 0 title: 'Notification' props: description: 'This is a notification.' avatar: src: 'https://avatars.githubusercontent.com/u/739984?v=4' excludedProps:

• avatar

---

::

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.

::component-card

baseProps: id: 5 title: 'Notification' description: 'This is a notification.' props: timeout: 60000

::

Color

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

::component-card

baseProps: id: 5 title: 'Notification' description: 'This is a notification.' timeout: 600000 props: icon: 'i-heroicons-x-circle' color: 'red' extraColors:

• gray excludedProps:
• icon

---

::

Click

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

::component-example #default :notification-example-click #code

<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.

::component-example #default :notification-example-callback #code

<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 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 prop or globally through ui.notifications.default.close.

::component-card

baseProps: id: 6 title: 'Notification' timeout: 0 props: close: icon: 'i-heroicons-archive-box-x-mark' color: 'primary' variant: 'outline' padded: true size: '2xs' ui: rounded: 'rounded-full' excludedProps:

• close

---

::

Actions

Use the actions prop to add actions to the Notification.

::component-example #default :notification-example-actions #code

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

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

::

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

::component-card

baseProps: id: 6 title: 'Notification' timeout: 0 props: actions: - variant: 'ghost' color: 'gray' label: Action 1 - variant: 'solid' color: 'gray' label: Action 2 excludedProps:

• actions

---

::

Actions will render differently whether you have a description set.

::component-card

baseProps: id: 6 title: 'Notification' description: 'This is a notification.' timeout: 0 props: actions: - variant: 'solid' color: 'primary' label: Action 1 - variant: 'outline' color: 'primary' label: Action 2 excludedProps:

• actions

---

::

Props

:component-props

Preset

:component-preset