Toasts

Toast Component

Add the following to your app's root layout so that the component stays in scope for whenever you might trigger it:

import { Toast } from '@brainandbones/skeleton';

<Toast background="bg-accent-500" position="tr" variant="filled" duration={250} />

Properties

Methods

To begin using toasts, import the toast store. This allows you to manipulate the toast queue using the following methods.

import { toastStore } from '@brainandbones/skeleton';

Trigger

The following method allows you to insert a new toast into the toast queue.

toastStore.trigger(t); // see Toast Settings below

Close

Allows you to close the current toast by pruning the visible toast from the top of the queue.

toastStore.close();

Clear

Allows you to flush the entire toast queue, returning it to an empty state.

toastStore.clear();

Toast Settings

import type { ToastMessage } from '@brainandbones/skeleton';

Several settings are available to a toast. These allow you to set the message, enabled/disabled auto-hide, set the autohide timeout. As well as provide an extra action button.

const t: ToastMessage = {
    message: 'Your Message Here',
    // Optional:
    autohide: true, 
    timeout: 5000,
    button: { label: 'Greeting', action: () => { alert('Hello, Skeleton'); }}
};

Debugging

Log the Queue

Use the following to monitor the queue in your console as it updates. Note that Svelte store contents are only visible for the current logged line.

toastStore.subscribe(() => { console.log($toastStore); });

Visualize the Queue

Use the following to display the queue in your UI.

<pre>queue: {JSON.stringify($toastStore, null, 2)}</pre>

Accessibility

Meets all alert requirements for the ARIA Guidelines.