Toast

Let it bake and fly from your Toaster!

View Source 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-elements 
• winduum-stimulus 
• winduum-vue 
• winduum-react 

Styles

Variants

• default 
• content 

Props

• default 
• content 

Scripts

The Toast script runs enter/exit animations and handles optional auto-hide.

INFO

For winduum-elements and winduum-stimulus, toasts are expected to be appended into the Toaster from the backend, for example via ajax. You can also append the HTML manually, for example with insertAdjacentHTML.

Examples

Default

winduum-elements

<button class="x-button" id="appendToast">Append toast</button>

<template id="toastTemplate">
    <x-toast class="x-toast" role="status" aria-live="assertive" aria-atomic="true">
        <div class="x-toast-content">
            <div class="flex-col">
                <div class="x-title">Hello toast</div>
                <div class="x-text">Amazing toast</div>
            </div>
            <button class="x-button muted ml-auto" command="--close">Close</button>
        </div>
    </x-toast>
</template>

<x-toaster class="x-toaster items-end" popover="manual"></x-toaster>

winduum-stimulus

<button class="x-button" id="appendToast">Append toast</button>

<template id="toastTemplate">
    <li class="x-toast" data-controller="x-toast" data-action="x-toast:connect->x-toast#show" role="status" aria-live="assertive" aria-atomic="true">
        <div class="x-toast-content">
            <div class="flex-col">
                <div class="x-title">Hello toast</div>
                <div class="x-text">Amazing toast</div>
            </div>
            <button class="x-button muted ml-auto" data-action="click->x-toast#close">Close</button>
        </div>
    </li>
</template>

<ol class="x-toaster items-end" popover="manual" data-controller="x-toaster"></ol>

winduum-vue

<script setup lang="ts">
    import { ref } from 'vue'
    import { Button } from '@/components/button'
    import { Title } from '@/components/title'
    import { Text } from '@/components/text'
    import { Toast, ToastContent } from '@/components/toast'
    import { Toaster } from '@/components/toaster'

    const toasts = ref<number[]>([])

    const showToast = () => {
        toasts.value.push(Date.now())
    }

    const closeToast = (toast: number) => {
        toasts.value = toasts.value.filter(item => item !== toast)
    }
</script>

<template>
    <Button @click="showToast">Show toast</Button>

    <Toaster class="items-end">
        <Toast v-for="toast in toasts" v-slot="{ close }" :key="toast" @close="closeToast(toast)">
            <ToastContent>
                <div class="flex-col">
                    <Title>Hello toast</Title>
                    <Text>Amazing toast</Text>
                </div>
                <Button class="muted ml-auto" @click="close">Close</Button>
            </ToastContent>
        </Toast>
    </Toaster>
</template>

winduum-react

import { useState } from "react"
import { Button } from "@/components/button"
import { Title } from "@/components/title"
import { Text } from "@/components/text"
import { Toast, ToastContent } from "@/components/toast"
import { Toaster } from "@/components/toaster"

export function Example() {
    const [toasts, setToasts] = useState<number[]>([])

    const showToast = () => {
        setToasts(current => [...current, Date.now()])
    }

    const closeToast = (toast: number) => {
        setToasts(current => current.filter(item => item !== toast))
    }

    return (
        <>
            <Button onClick={showToast}>Show toast</Button>

            <Toaster className="items-end">
                {toasts.map((toast) => (
                    <Toast key={toast} onClose={() => closeToast(toast)}>
                        {({ close }) => (
                            <ToastContent>
                                <div className="flex-col">
                                    <Title>Hello toast</Title>
                                    <Text>Amazing toast</Text>
                                </div>
                                <Button className="muted ml-auto" onClick={close}>Close</Button>
                            </ToastContent>
                        )}
                    </Toast>
                ))}
            </Toaster>
        </>
    )
}

JavaScript API

showToast

• Type: (element: HTMLElement, options?: ShowToastOptions) => Promise<void>
• Kind: async

Applies an enter animation to existing toast and schedules its auto-hide.

Example

import { showToast } from 'winduum/src/components/toast'

document.querySelector('#showToast').addEventListener('click', async () => {
    await showToast(document.querySelector('#toastElement'))
})

ShowToastOptions

---

openAttribute

• Type: string
• Default: data-open

---

autoHide

• Type: number | null
• Default: 7500

Time in ms after which the toast closes automatically — the delay scales with the number of toasts in the toaster. Set to null to disable.

---

heightProperty

• Type: string
• Default: --x-toast-block-size

---

close

• Type: CloseToastOptions
• Default: {}

Options passed to closeToast when the toast auto-hides.

---

closeToast

• Type: (element: HTMLElement, options?: CloseToastOptions) => Promise<void>
• Kind: async

Applies an exit animation to existing toast and removes it from DOM.

Example

import { closeToast } from 'winduum/src/components/toast'

document.querySelector('#closeToast').addEventListener('click', async () => {
    await closeToast(document.querySelector('#toastElement'))
})

CloseToastOptions

---

closedAttribute

• Type: string
• Default: data-closed

---

heightProperty

• Type: string
• Default: --x-toast-block-size

---

remove

• Type: boolean
• Default: true

Determines whether the toast is removed from the DOM after the exit animation.