ui/docs/content/3.components/toast.md

description, category, links

description	category	links
A succinct message to provide information or feedback to the user.	overlay	label icon to Toast i-custom-reka-ui https://reka-ui.com/docs/components/toast label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/tree/v3/src/runtime/components/Toast.vue

Usage

Use the useToast composable to display a toast in your application.

::warning Make sure to wrap your app with the App component which uses our Toaster component which uses the ToastProvider component from Reka UI. ::

::tip{to="/components/app#props"} You can check the App component toaster prop to see how to configure the Toaster globally. ::

Title

Pass a title field to the toast.add method to display a title.

::component-example

options:

• name: 'title' label: 'title' default: 'Uh oh! Something went wrong.' name: 'toast-title-example'

---

::

Description

Pass a description field to the toast.add method to display a description.

::component-example

options:

• name: 'title' label: 'title' default: 'Uh oh! Something went wrong.'
• name: 'description' label: 'description' default: 'There was a problem with your request.' name: 'toast-description-example'

---

::

Icon

Pass an icon field to the toast.add method to display an Icon.

::component-example

options:

• name: 'icon' label: 'icon' default: 'i-lucide-wifi' name: 'toast-icon-example'

---

::

Avatar

Pass an avatar field to the toast.add method to display an Avatar.

::component-example

options:

• name: 'avatar.src' alias: 'avatar' label: 'avatar.src' default: src: 'https://github.com/benjamincanac.png' name: 'toast-avatar-example'

---

::

Color

Pass a color field to the toast.add method to change the color of the Toast.

::component-example

options:

• name: 'color' label: 'color' default: neutral items:
  • primary
  • secondary
  • success
  • info
  • warning
  • error
  • neutral name: 'toast-color-example'

---

::

Close

Pass a close field to customize or hide the close button (with false value).

::component-example

name: 'toast-close-example'

::

Close Icon

Pass a closeIcon field to customize the close button Icon. Default to i-lucide-x.

::component-example

options:

• name: 'closeIcon' label: 'closeIcon' default: 'i-lucide-arrow-right' name: 'toast-close-icon-example'

---

::

::framework-only #nuxt :::tip{to="/getting-started/icons/nuxt#theme"} You can customize this icon globally in your app.config.ts under ui.icons.close key. :::

#vue :::tip{to="/getting-started/icons/vue#theme"} You can customize this icon globally in your vite.config.ts under ui.icons.close key. ::: ::

Actions

Pass an actions field to add some Button actions to the Alert.

::component-example

options:

• name: 'description' label: 'description' default: 'There was a problem with your request.' name: 'toast-actions-example'

---

::

Orientation

Use the orientation prop to change the orientation of the Toast.

::component-example

options:

• name: 'orientation' label: 'orientation' default: 'horizontal' items:
  • horizontal
  • vertical name: 'toast-orientation-example'

---

::

Examples

Change global position

Change the toaster.position prop on the App component to change the position of the toasts.

::component-example

prettier: true name: 'toast-example'

#options :toaster-position-example ::

::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.config.ts#L3"} In this example, we use the AppConfig to configure the position prop of the Toaster component globally. ::

Change global duration

Change the toaster.duration prop on the App component to change the duration of the toasts.

::component-example

prettier: true name: 'toast-example'

#options :toaster-duration-example ::

::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.config.ts#L5"} In this example, we use the AppConfig to configure the duration prop of the Toaster component globally. ::

Stacked toasts

Set the toaster.expand prop to false on the App component to display stacked toasts.

::tip You can hover over the toasts to expand them. This will also pause the timer of the toasts. ::

::component-example

prettier: true name: 'toast-example'

#options :toaster-expand-example ::

::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.config.ts#L4"} In this example, we use the AppConfig to configure the expand prop of the Toaster component globally. ::

API

Props

:component-props

Slots

:component-slots

Emits

:component-emits

Theme

:component-theme