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

---
github: true
description: Display a toast notification in your app.
---

## Usage

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

```vue [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
```vue
<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 behavior in the `app.config.ts` through `ui.notifications`:

```ts [app.config.ts]
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](https://icones.js.org) 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](/elements/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
```vue
<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
```vue
<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](/elements/button) component to customize it through the `close-button` prop or globally through `ui.notification.default.closeButton`.

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

### Actions

Use the `actions` prop to add actions to the Notification.

::component-example
#default
:notification-example-actions
#code
```vue
<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](/elements/button) component inside the action or globally through `ui.notification.default.actionButton`.

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