Sonner Web Component

An opinionated toast component for everything else.

GitHub

Start using

Add to your HTML — no build step required.

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/sonner-web-component">
</script>
<sonner-toaster></sonner-toaster>

Or install from npm:

npm install sonner-web-component

Types

toast('Event has been created')

Description

Add a description to any toast type.

toast('Event has been created', {
  description: 'Monday, January 3rd at 6:00pm'
})

Position

Swipe direction changes depending on the position.

<sonner-toaster position="bottom-right"></sonner-toaster>

Expand

Toasts can also be expanded by default.

<sonner-toaster></sonner-toaster>

Visible Toasts

Control how many toasts are visible at once.

<sonner-toaster visible-toasts="3"></sonner-toaster>

Duration

Set how long toasts stay visible, in milliseconds.

<sonner-toaster duration="4000"></sonner-toaster>

Burst

When multiple toasts arrive within the burst window, the stack auto-expands so all messages are visible, then collapses after the linger period. This is unique to Sonner Web Component.

<sonner-toaster burst-window="500" burst-linger="3000"></sonner-toaster>

Rich Colors

Colored backgrounds for different toast types.

<sonner-toaster rich-colors></sonner-toaster>

Close Button

Add a close button to all toasts.

<sonner-toaster></sonner-toaster>

Custom HTML

Render rich HTML inside a toast for structured content.

toast('', {
  html: `
    <div style="font-weight:600">📅 Team standup</div>
    <div style="color:#888;font-size:12px">
      Tomorrow at 9:00am · Conference Room B
    </div>
  `
})

Action & Cancel

Add action and cancel buttons to any toast.

toast('Event has been created', {
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo')
  }
})

Invert

Dark toast on a light background, or light on dark.

toast('Event has been created', { invert: true })

Callbacks

Run code when a toast is dismissed or auto-closes.

toast('Swipe me away', {
  onDismiss: (t) => toast.info(\`Toast #\${t.id} dismissed\`)
})

Dismiss

Programmatically dismiss toasts by ID or all at once.

const id = toast('Event has been created')

// Dismiss by ID
toast.dismiss(id)

// Dismiss all
toast.dismiss()

Declarative

Trigger toasts from HTML attributes — no JavaScript required.

<button
  data-toast-success="Event has been created"
  data-toast-description="Monday, January 3rd at 6:00pm">
  Success
</button>

Bridges

First-class integrations for server-driven stacks.

htmx

Trigger toasts from HX-Trigger response headers.

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/sonner-web-component/dist/bridges/htmx.js">
</script>

<!-- Server responds with: -->
<!-- HX-Trigger: {"toast": {"level": "success", "message": "Saved!"}} -->
<button hx-post="/save" hx-swap="none">Save</button>

Alpine.js

Use $toast magic in Alpine expressions.

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/sonner-web-component/dist/bridges/alpine.js">
</script>

<button x-data @click="$toast.success('Saved!')">
  Save
</button>

fetch

Automatically reads X-Toasts header from fetch responses.

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/sonner-web-component/dist/bridges/fetch.js">
</script>

<!-- Toasts appear automatically from server responses -->
<script>
  fetch('/api/save', { method: 'POST' })
  // X-Toasts header is read and rendered automatically
</script>