Toast

BaseToast · A simple toast component.

vue

<template>
  <BaseButton
    @click="add({
      title: 'Hey there! 👋',
      description: 'Looks like you clicked the button!',
      duration: 50000,
    })"
  >
    Show toast
  </BaseButton>
</template>

<script setup lang="ts">
const { add } = useNuiToasts()
</script>

Features

Automatically closes
Pauses closing on hover, focus and window blur
Supports hotkey to jump to toast viewport
Supports closing via swipe gesture
Exposes CSS variables for swipe gesture animations
Can be controlled or uncontrolled

Anatomy

This component is provided by the BaseProviders component inside your app.vue file. You can customize the toast's visual style by using the available props.

vue

<template>
  <BaseProviders :toast="{ max: 3, position: 'top-center' }">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </BaseProviders>
</template>

API Reference

This component has props that you can use to modify its visual style and behavior.

Prop	Type
`title` default:`-`	`string`
`description` default:`-`	`string`
`icon` default:`-`	`string`
`progress` default:`-`	`boolean`
`actions` default:`-`	`(BaseButtonProps & { label: string; onClick?: ((e: Event) => void \| Promise<void>); })[]`
`default-open` default:`-`	`boolean` The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
`force-mount` default:`-`	`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`type` default:`-`	`"background" \| "foreground"` Control the sensitivity of the toast for accessibility purposes. For toasts that are the result of a user action, choose `foreground`. Toasts generated from background tasks should use `background`.
`open` default:`-`	`boolean` The controlled open state of the dialog. Can be bind as `v-model:open`.
`duration` default:`-`	`number` Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.

Event	Emitted Value Type
`pause`	`[]`
`escape-key-down`	`[event: KeyboardEvent]`
`resume`	`[]`
`swipe-start`	`[event: SwipeEvent]`
`swipe-move`	`[event: SwipeEvent]`
`swipe-cancel`	`[event: SwipeEvent]`
`swipe-end`	`[event: SwipeEvent]`
`update:open`	`[value: boolean]`

Customization

Your can override the component default CSS variables in your main.css file.

css

@theme {
  /* Toast container variables */
  --color-card-default-bg: var(--color-white);
  --color-card-default-border: var(--color-muted-300);
}

Examples

Icon

Use the icon prop to add an icon to your toast.

vue

<template>
  <BaseButton
    @click="add({
      icon: 'lucide:check',
      title: 'Changes saved',
      description: 'Your changes have been saved successfully.',
      duration: 3000,
    })"
  >
    Show toast
  </BaseButton>
</template>

<script setup lang="ts">
const { add } = useNuiToasts()
</script>

Actions

Use the actions prop to add actions to your toast.

vue

<template>
  <BaseButton
    @click="add({
      title: 'Order sent',
      description: 'Your order has been sent successfully.',
      icon: 'lucide:check',
      actions: [
        {
          label: 'Cancel',
          variant: 'default',
          onClick: () => {
            log('Action clicked')
          },
        },
      ],
    })"
  >
    Show toast with action
  </BaseButton>
</template>

<script setup lang="ts">
const { add } = useNuiToasts()
const log = console.log
</script>

Timer

Use the progress prop to show a timer on your toast.

vue

<template>
  <BaseButton
    @click="add({
      title: 'Hey there! 👋',
      description: 'Looks like you clicked the button!',
      duration: 3000,
      progress: true,
    })"
  >
    Show toast with action
  </BaseButton>
</template>

<script setup lang="ts">
const { add } = useNuiToasts()
</script>

Theme Toggle

Tooltip

Edit this page on Github