Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Toast

Temporary notifications that appear above the page. Mount a single toaster in your layout, then dispatch slate-toast events from anywhere. Requires Alpine.js.

API freeze: the slate-toast event name and detail fields (id, title, description, variant, duration) are frozen — see API freeze.

Usage
example.blade.php 
<x-slate::button
    variant="outline"
    @click="$dispatch('slate-toast', {
        title: 'Scheduled',
        description: 'Your meeting was added to the calendar.'
    })"
>
    Show toast
</x-slate::button>

Variants

Use variant: default, destructive, success, warning, or info.

example.blade.php 
<div class="flex flex-wrap gap-2">
    <x-slate::button
        variant="outline"
        @click="$dispatch('slate-toast', { title: 'Saved', description: 'Your changes are live.', variant: 'success' })"
    >
        Success
    </x-slate::button>

    <x-slate::button
        variant="outline"
        @click="$dispatch('slate-toast', { title: 'Something went wrong', description: 'Please try again.', variant: 'destructive' })"
    >
        Destructive
    </x-slate::button>

    <x-slate::button
        variant="outline"
        @click="$dispatch('slate-toast', { title: 'Heads up', description: 'Your trial ends in 3 days.', variant: 'warning' })"
    >
        Warning
    </x-slate::button>
</div>

Layout toaster

Mount once near the root of your app (teleports to body):

example.blade.php 
<x-slate::toaster position="bottom-end" />

Then fire toasts from anywhere:

script.js 
window.dispatchEvent(new CustomEvent('slate-toast', {
  detail: {
    title: 'Copied',
    description: 'Link copied to clipboard.',
  }
}))

Or with Alpine:

example.blade.php 
<x-slate::button @@click="$dispatch('slate-toast', { title: 'Saved' })">
    Save
</x-slate::button>

Static toast

Compose a toast card without the viewport:

Invite sent
We've emailed your teammates a join link.
example.blade.php 
<x-slate::toast
    title="Invite sent"
    description="We've emailed your teammates a join link."
/>

Composition
code 
Toaster (layout, once)
└── Toast stack (Alpine)

Toast
├── ToastTitle
├── ToastDescription
├── ToastAction
└── ToastClose

API

Toaster
Prop Default Notes
position bottom-end top-start, top-center, top-end, bottom-start, bottom-center, bottom-end
duration 4000 Auto-dismiss ms; 0 keeps until closed

Event payload (slate-toast)
Field Notes
title Bold heading
description Supporting text
variant default | destructive | success | warning | info
duration Overrides toaster default
Last updated .