Usage
Use the useToast composable to display a toast in your application.
App
component which uses our Toaster
component which uses the ToastProvider
component from Reka UI.Title
Pass a title
field to the toast.add
method to display a title.
<script setup lang="ts">
const props = defineProps<{
title: string
}>()
const toast = useToast()
function showToast() {
toast.add(props)
}
</script>
<template>
<UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>
Description
Pass a description
field to the toast.add
method to display a description.
<script setup lang="ts">
const props = defineProps<{
title: string
description: string
}>()
const toast = useToast()
function showToast() {
toast.add(props)
}
</script>
<template>
<UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>
Icon
Pass an icon
field to the toast.add
method to display an Icon.
<script setup lang="ts">
const props = defineProps<{
icon: string
}>()
const toast = useToast()
function showToast() {
toast.add({
title: 'Uh oh! Something went wrong.',
description: 'There was a problem with your request.',
icon: props.icon
})
}
</script>
<template>
<UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>
Avatar
Pass an avatar
field to the toast.add
method to display an Avatar.
<script setup lang="ts">
import type { AvatarProps } from '@nuxt/ui'
const props = defineProps<{
avatar: AvatarProps
}>()
const toast = useToast()
function showToast() {
toast.add({
title: 'User invited',
description: 'benjamincanac was invited to the team.',
avatar: props.avatar
})
}
</script>
<template>
<UButton label="Invite user" color="neutral" variant="outline" @click="showToast" />
</template>
Color
Pass a color
field to the toast.add
method to change the color of the Toast.
<script setup lang="ts">
import type { ToastProps } from '@nuxt/ui'
const props = defineProps<{
color: ToastProps['color']
}>()
const toast = useToast()
function showToast() {
toast.add({
title: 'Uh oh! Something went wrong.',
description: 'There was a problem with your request.',
icon: 'i-lucide-wifi',
color: props.color
})
}
</script>
<template>
<UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>
Close
Pass a close
field to customize or hide the close button (with false
value).
<script setup lang="ts">
const toast = useToast()
function showToast() {
toast.add({
title: 'Uh oh! Something went wrong.',
description: 'There was a problem with your request.',
icon: 'i-lucide-wifi',
close: {
color: 'primary',
variant: 'outline',
class: 'rounded-full'
}
})
}
</script>
<template>
<UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>
Close Icon
Pass a closeIcon
field to customize the close button Icon. Default to i-lucide-x
.
<script setup lang="ts">
const props = defineProps<{
closeIcon: string
}>()
const toast = useToast()
function showToast() {
toast.add({
title: 'Uh oh! Something went wrong.',
description: 'There was a problem with your request.',
closeIcon: props.closeIcon
})
}
</script>
<template>
<UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>
Actions
Pass an actions
field to add some Button actions to the Alert.
<script setup lang="ts">
const toast = useToast()
const props = defineProps<{
description: string
}>()
function showToast() {
toast.add({
title: 'Uh oh! Something went wrong.',
description: props.description,
actions: [{
icon: 'i-lucide-refresh-cw',
label: 'Retry',
color: 'neutral',
variant: 'outline',
onClick: (e) => {
e?.stopPropagation()
}
}]
})
}
</script>
<template>
<UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>
Examples
Change global position
Change the toaster.position
prop on the App component to change the position of the toasts.
<script setup lang="ts">
const toast = useToast()
function addToCalendar() {
const eventDate = new Date(Date.now() + Math.random() * 31536000000)
const formattedDate = eventDate.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
})
toast.add({
title: 'Event added to calendar',
description: `This event is scheduled for ${formattedDate}.`,
icon: 'i-lucide-calendar-days'
})
}
</script>
<template>
<UButton
label="Add to calendar"
color="neutral"
variant="outline"
icon="i-lucide-plus"
@click="addToCalendar"
/>
</template>
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.
<script setup lang="ts">
const toast = useToast()
function addToCalendar() {
const eventDate = new Date(Date.now() + Math.random() * 31536000000)
const formattedDate = eventDate.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
})
toast.add({
title: 'Event added to calendar',
description: `This event is scheduled for ${formattedDate}.`,
icon: 'i-lucide-calendar-days'
})
}
</script>
<template>
<UButton
label="Add to calendar"
color="neutral"
variant="outline"
icon="i-lucide-plus"
@click="addToCalendar"
/>
</template>
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.
<script setup lang="ts">
const toast = useToast()
function addToCalendar() {
const eventDate = new Date(Date.now() + Math.random() * 31536000000)
const formattedDate = eventDate.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
})
toast.add({
title: 'Event added to calendar',
description: `This event is scheduled for ${formattedDate}.`,
icon: 'i-lucide-calendar-days'
})
}
</script>
<template>
<UButton
label="Add to calendar"
color="neutral"
variant="outline"
icon="i-lucide-plus"
@click="addToCalendar"
/>
</template>
AppConfig
to configure the expand
prop of the Toaster
component globally.API
Props
Prop | Default | Type |
---|---|---|
as |
|
The element or component this component should render as. |
title |
| |
description |
| |
icon |
| |
avatar |
| |
color |
|
|
actions |
Display a list of actions:
| |
close |
|
Display a close button to dismiss the toast.
|
closeIcon |
|
The icon displayed in the close button. |
type |
Control the sensitivity of the toast for accessibility purposes. For toasts that are the result of a user action, choose | |
open |
The controlled open state of the dialog. Can be bind as | |
defaultOpen |
The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. | |
duration |
Time in milliseconds that toast should remain visible for. Overrides value
given to | |
ui |
|
Slots
Slot | Type |
---|---|
leading |
|
title |
|
description |
|
actions |
|
close |
|
Emits
Event | Type |
---|---|
pause |
|
update:open |
|
escapeKeyDown |
|
resume |
|
swipeStart |
|
swipeMove |
|
swipeCancel |
|
swipeEnd |
|
Theme
export default defineAppConfig({
ui: {
toast: {
slots: {
root: 'relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none',
wrapper: 'w-0 flex-1 flex flex-col gap-1',
title: 'text-sm font-medium text-[var(--ui-text-highlighted)]',
description: 'text-sm text-[var(--ui-text-muted)]',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xl',
actions: 'flex gap-1.5 shrink-0',
progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',
close: 'p-0.5'
},
variants: {
color: {
primary: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]',
icon: 'text-[var(--ui-primary)]',
progress: 'bg-[var(--ui-primary)]'
},
secondary: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-secondary)]',
icon: 'text-[var(--ui-secondary)]',
progress: 'bg-[var(--ui-secondary)]'
},
success: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-success)]',
icon: 'text-[var(--ui-success)]',
progress: 'bg-[var(--ui-success)]'
},
info: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-info)]',
icon: 'text-[var(--ui-info)]',
progress: 'bg-[var(--ui-info)]'
},
warning: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-warning)]',
icon: 'text-[var(--ui-warning)]',
progress: 'bg-[var(--ui-warning)]'
},
error: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)]',
icon: 'text-[var(--ui-error)]',
progress: 'bg-[var(--ui-error)]'
},
neutral: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]',
icon: 'text-[var(--ui-text-highlighted)]',
progress: 'bg-[var(--ui-bg-inverted)]'
}
},
multiline: {
true: {
root: 'items-start',
actions: 'items-start mt-1'
},
false: {
root: 'items-center',
actions: 'items-center'
}
}
},
defaultVariants: {
color: 'primary'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
toast: {
slots: {
root: 'relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none',
wrapper: 'w-0 flex-1 flex flex-col gap-1',
title: 'text-sm font-medium text-[var(--ui-text-highlighted)]',
description: 'text-sm text-[var(--ui-text-muted)]',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xl',
actions: 'flex gap-1.5 shrink-0',
progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',
close: 'p-0.5'
},
variants: {
color: {
primary: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]',
icon: 'text-[var(--ui-primary)]',
progress: 'bg-[var(--ui-primary)]'
},
secondary: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-secondary)]',
icon: 'text-[var(--ui-secondary)]',
progress: 'bg-[var(--ui-secondary)]'
},
success: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-success)]',
icon: 'text-[var(--ui-success)]',
progress: 'bg-[var(--ui-success)]'
},
info: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-info)]',
icon: 'text-[var(--ui-info)]',
progress: 'bg-[var(--ui-info)]'
},
warning: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-warning)]',
icon: 'text-[var(--ui-warning)]',
progress: 'bg-[var(--ui-warning)]'
},
error: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)]',
icon: 'text-[var(--ui-error)]',
progress: 'bg-[var(--ui-error)]'
},
neutral: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]',
icon: 'text-[var(--ui-text-highlighted)]',
progress: 'bg-[var(--ui-bg-inverted)]'
}
},
multiline: {
true: {
root: 'items-start',
actions: 'items-start mt-1'
},
false: {
root: 'items-center',
actions: 'items-center'
}
}
},
defaultVariants: {
color: 'primary'
}
}
}
})
]
})