Toasts

Transient notifications anchored to the viewport.

Setup

Toast styles are included in Manifest CSS or a standalone stylesheet, both referencing theme variables.

Toast functionality is included in manifest.js with all core plugins, or it can be selectively loaded.

Manifest CSS / JSStandalone

<!-- Manifest CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.css" />

<!-- Manifest JS -->
<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"></script>
<!-- Toast styles only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.toast.css" />

<!-- Manifest JS: toasts plugin only -->
<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"
  data-plugins="toasts"></script>

Default

Toasts can be triggered from any element using the x-toast directive, with its value being the content. They automatically disappear after 3 seconds, though the timer will pause on hover. Toasts will stack if multiple are triggered concurrently.

<button x-toast="This is a basic toast notification">Show Toast</button>

Modifiers

Colors

Color modifiers provide unique visual context.

<button x-toast="Default toast notification">Default</button>
<button x-toast.brand="Brand toast notification">Brand</button>
<button x-toast.accent="Accent toast notification">Accent</button>
<button x-toast.positive="Operation completed successfully">Positive</button>
<button x-toast.negative="Something went wrong">Negative</button>

Duration

A number sets how long the toast remains visible in milliseconds.

<button x-toast.1000="Dismisses after 1 second">1 Second</button>
<button x-toast="Default 3 seconds">Default</button>
<button x-toast.5000="Dismisses after 5 seconds">5 Seconds</button>

Dismiss

The dismiss modifier enables manual closing.

<button x-toast.dismiss="Can be manually dismissed">Dismissible</button>
<button x-toast.positive.dismiss="Positive with dismiss button">Positive Dismissible</button>
<button x-toast.negative.dismiss="Negative with dismiss button">Negative Dismissible</button>

Fixed

The fixed modifier prevents the default auto-dismiss behavior and adds the dismiss button by default.

<button x-toast.fixed="Stays until manually closed">Fixed</button>
<button x-toast.positive.fixed="Fixed positive notification">Fixed Positive</button>
<button x-toast.negative.fixed="Fixed negative notification">Fixed Negative</button>

Combined

Combine different modifiers for complex toast behaviors.

<button x-toast.negative.dismiss.2000="Negative toast with 2s duration and dismiss button">Negative + Dismiss + 2s</button>
<button x-toast.positive.fixed="Positive toast that stays until dismissed">Positive + Fixed</button>

Magic Method

Use the $toast magic method for programmatic toast creation.

<button @click="$toast('Programmatic toast')">Basic Magic</button>
<button @click="$toast.brand('Brand via magic method')">Brand Magic</button>
<button @click="$toast.positive('Positive via magic method')">Positive Magic</button>
<button @click="$toast.negative('Negative via magic method')">Negative Magic</button>
<button @click="$toast.negative.fixed('Fixed negative toast')">Fixed Negative Magic</button>

Rich Content

Rich content supports HTML including icons for enhanced formatting.

<button x-toast="<span x-icon='lucide:info'></span>Hello <b>bold</b> and <em>italic</em> world">Rich Content</button>

Dynamic Expressions

Toast content can be any Alpine.js expression, evaluated each time the toast is triggered. Plain text that isn't an expression, like Hello world or Don't save, displays exactly as written.

<button x-data="{ count: 0 }" @click="count++; $toast(`Button clicked ${count} times`)">
    Dynamic Count (<span x-text="count"></span>)
</button>

<button x-toast="`Current time: ${new Date().toLocaleTimeString()}`">
    Current Time
</button>

<button x-data="{ pending: ['Draft', 'Review'] }" x-toast="pending.length ? 'Pending: ' + pending.join(', ') : 'Nothing pending'">
    Pending
</button>

A single word displays as text unless it names a value in scope, so x-toast="count" shows the current count while x-toast="Saved" shows Saved. Loop variables from x-for work the same way, as in x-toast="item.message". Expressions read state after the element's click handlers run, so give x-for rows a :key when a click reorders or removes items. An expression that resolves to an empty string, false, or null shows no toast.

Like static content, expression results render as HTML. Escape user-submitted values before showing them in a toast.

Dynamic Data

Toasts can retrieve content from data sources using the $x syntax.

HTMLexample.json

<button x-toast="$x.example.toast">Data Source Toast</button>
{
    "toast": "This content comes from a data source"
}

Styles

Theme

Default toasts use the following theme variables:

Dismiss Button Icon

The dismiss button icon is an encoded SVG in the toast style's --icon-toast-dismiss variable. To modify it:

1. Choose a desired icon from Iconify or other SVG icon source.
2. Copy the encoded SVG string (in Iconify, go to an icon's CSS tab and find the --svg value). Otherwise, use an SVG encoder.
3. Overwrite the --icon-toast-dismiss variable value with the encoded SVG string.

Default toast dismiss icon
:root {
    --icon-toast-dismiss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E")
}

Customization

Modify styles with custom CSS for various toast classes.

/* Parent wrapper for multiple toasts */
.toast-container { 
    position: fixed;
    top: 3rem;
    left: auto;
    right: 3rem;
}

/* Toast */
.toast { 
    background: white;

    /* Content area */
    .toast-content { 
        font-size: 1rem; 
    }

    /* Dismiss button */
    .toast-dismiss-button { 
        color: gray; 
    }
}

/* Entry animation */
.toast-entry { 
    opacity: 1; 
}

/* Exit animation */
.toast-exit { 
    opacity: 0; 
}