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

github

github
true

Usage

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

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.

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

::

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' description: 'This is a notification.' props: 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: 10000

::

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