Installation

pnpm dlx kliping@latest add sonner

Usage

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

<template>
  <Button @click="() => toast('My first toast')">
    Give me a toast
  </Button>
</template>

Installation

Komponen <Toaster /> beserta CSS-nya wajib ada supaya toast bisa tampil. Pasang keduanya di layout paling luar aplikasi Anda.

<script setup lang="ts">
import 'vue-sonner/style.css'
import { Toaster } from '@/components/ui/sonner'
</script>

<template>
  <div>
    <main>
      <!-- Your app content -->
    </main>
    <Toaster />
  </div>
</template>

Examples

Tipe

Dengan Dialog

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, vue-sonner@^2.0.9
Files	components/ui/sonner/sonner.vue components/ui/sonner/index.ts

API Reference

Prop	Type	Default	Description
invert?	boolean	—	Swap the colours: dark toasts on a light page, light on a dark page.
theme?	Theme	—	Colour scheme of the toasts: light, dark, or system.
position?	Position	—	Corner or edge where toasts stack; default bottom-right.
closeButtonPosition?	CloseButtonPosition	—	Corner of each toast where the close button sits.
hotkey?	string[]	—	Keys that move focus to the toast region; default Alt+T (["altKey", "KeyT"]).
richColors?	boolean	—	Coloured backgrounds for success, error, warning, and info toasts.
expand?	boolean	—	Show every toast expanded instead of stacked.
duration?	number	—	Milliseconds before a toast closes by itself; default 4000.
gap?	number	—	Pixels between expanded toasts; default 14.
visibleToasts?	number	—	How many toasts are visible at once; default 3.
closeButton?	boolean	—	Add a close button to every toast.
toastOptions?	ToastOptions	—	Defaults applied to every toast (class, style, duration, …).
offset?	Offset	—	Distance from the viewport edge; default 24px.
mobileOffset?	Offset	—	Distance from the viewport edge on small screens; default 16px.
swipeDirections?	SwipeDirection[]	—	Directions a toast can be swiped to dismiss it.
icons?	ToastIcons	—	Replace the default icons per toast type.
containerAriaLabel?	string	—	Accessible name of the toast region; default "Notifications".
id?	string	—	The id of the rendered element.
dir?	"ltr" | "rtl" | "auto"	—	The reading direction. Inherits from DirectionProvider when unset.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --popover, --popover-foreground, --radius.

Variabel khusus komponen ini — bisa ditimpa lewat style atau CSS Anda:

Variable	Value
--border-radius	var(--radius)
--normal-bg	var(--popover)
--normal-border	var(--border)
--normal-text	var(--popover-foreground)

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.