Name: Lapaktoto UI
Rating: 4.9 (127 reviews)

Preview

Instalasi

Terminal

bunx lapaktoto-ui add toast

Setup global

Tambahkan <Toaster /> sekali di root layout. Setelah itu, toast() bisa dipanggil dari komponen mana pun:

app/layout.tsx

import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="id" suppressHydrationWarning>
      <body>
        {children}
        <Toaster richColors closeButton />
      </body>
    </html>
  )
}

Variants

Sonner menyediakan 4 helper untuk variant umum:

Promise toast

Untuk async action, pakai toast.promise() — otomatis loading → success/error.

Dengan action button

Toast bisa dilengkapi tombol undo / lihat detail:

toast("Email terhapus", {
  description: "Email dipindah ke folder Trash.",
  action: {
    label: "Undo",
    onClick: () => restoreEmail(),
  },
})