Sonner

An opinionated toast component for Vue.

Examples

Default

<script setup>
import { Toaster } from '@empathyds/vue'
import { toast } from 'vue-sonner'
import { Button } from '@empathyds/vue'
</script>

<template>
  <Toaster />
  <Button
    variant="outline"
    @click="toast('Event has been created', {
      description: 'Sunday, December 03, 2023 at 9:00 AM',
      action: {
        label: 'Undo',
        onClick: () => console.log('Undo'),
      },
    })"
  >
    Show Toast
  </Button>
</template>
</template>

Installation

pnpm

pnpm add vue-sonner

npm

npm install vue-sonner

yarn

yarn add vue-sonner

bun

bun add vue-sonner

Props

Toaster

Prop	Type	Default	Description
position	'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'	'bottom-right'	The position of the toast
expand	boolean	false	Whether to expand the toast on hover
duration	number	4000	The duration of the toast
visible-toasts	number	3	The number of visible toasts
close-button	boolean	false	Whether to show the close button
rich-colors	boolean	false	Whether to allow rich colors
offset	number | string	-	The offset of the toast
dir	'ltr' | 'rtl' | 'auto'	'auto'	The direction of the toast
theme	'light' | 'dark' | 'system'	'system'	The theme of the toast

Slots

Toaster

Slot	Description
success-icon	The success icon
info-icon	The info icon
warning-icon	The warning icon
error-icon	The error icon
loading-icon	The loading icon