Preview

Installation

npx sigma-ui@latest add toaster

Add the Toaster component

Mount Toaster once, in your App.vue file:

<script setup lang="ts">
import { Toaster } from '@/components/ui/toaster';
</script>

<template>
  <Toaster />
</template>

Usage

<script setup lang="ts">
import { Button } from '@/components/ui/button';
import { toast } from '@/components/ui/toaster';
</script>

<template>
  <Button
    variant="outline"
    @click="toast('Event has been created', {
      description: 'Sunday, December 03, 2023 at 9:00 AM',
    })"
  >
    Add to calendar
  </Button>
</template>

• The component is based on vue-sonner. toast() and its variants (toast.success, toast.error, toast.promise, toast.custom, and so on) are re-exported from it.
• Pass action or cancel in the options to render buttons inside the toast.

Examples

Basic

Basic with Dialog

Custom "simple" template

Renders the CustomSimple component through toast.custom().

Custom "progress" template

Renders the CustomProgress component through toast.custom().

API Reference

Toaster

Props

Prop	Type	Default
id	string	-
invert	boolean	-
theme	Theme	-
position	Position	-
closeButtonPosition	CloseButtonPosition	-
hotkey	string[]	-
richColors	boolean	-
expand	boolean	-
duration	number	-
gap	number	-
visibleToasts	number	-
closeButton	boolean	-
toastOptions	ToastOptions	-
offset	Offset	-
mobileOffset	Offset	-
dir	"ltr" | "rtl" | "auto"	-
swipeDirections	SwipeDirection[]	-
icons	ToastIcons	-
containerAriaLabel	string	-

CustomSimple

Props

Prop	Type	Default
titlerequired Heading of the toast.	string	-
descriptionrequired Secondary text below the title.	string	-
actionTextrequired Label of the action button.	string	-

Events

Event	Payload
action Emitted when the action button is clicked.	[]

CustomProgress

Props

Prop	Type	Default
datarequired Toast content and progress state; progress is a percentage from 0 to 100 and the counter is hidden once it reaches 100.	{ id: string | number; title: string; description: string; progress: number; timer: number; actionText: string; cleanup: () => void; }	-

Events

Event	Payload
action Emitted when the action button is clicked.	[]

Accessibility

vue-sonner renders the toasts in a labelled region with an aria-live list, so screen readers announce new toasts without moving focus.

Key	Description
Alt + T	Moves focus to the notifications region. Change the shortcut with the hotkey prop.
Tab	Moves focus to the next button inside the toasts.
Escape	When focus is inside the notifications region, collapses the expanded toasts.