Toast

Toasts are used to show a notification to the user. They are implemented using Svelte stores. The <Base> component sets up the store and the wrapper components to show the toast.

Usage

import { toast } from '@hyvor/design/components';

toast('Blank toast');
toast.success('Success toast');
toast.error('Error toast');
toast.warning('Warning toast');
toast.info('Info toast');
toast.loading('Loading toast'); // not auto-closed

Options

In all toast-creating functions, you can pass an object as the second parameter to override options.

toast("Notification", {
    type: 'success',
    duration: 5000, // default is 5s
})

HTML and Components

The toast message can contain HTML code.

toast.success('<strong>Success</strong> toast');

You can also pass a svelte component as the message. A toast prop will be passed to the component. You can use it to close the toast.

import ToastComponent from './ToastComponent.svelte';
toast(ToastComponent);

// ToastComponent.svelte
<script>
    import toastService from '$lib/components/Toast/toast.ts';
    import Button from '$lib/components/Button/Button.svelte';

    export let toast;
</script>

This is a Svelte Component notification
<Button 
    on:click={() => toastService.close(toast.id)} 
    size="x-small"
>Close</Button>

Loading

You can show a loading toast by calling the toast.loading() function. The toast will not be auto-closed. You may update its type by calling a toast-creating function with the same toast id.

// save the toast id
const toastId = toast.loading('Loading...');

await doSomething();

// change status
toast.success('Success', { id: toastId });
toast.error('Error', { id: toastId });

// or by using options
toast('Success', { id: toastId, type: 'success' });

You can also close it by calling toast.close(toastId) function.

const toastId = toast.loading('Loading...');
await doSomething();
toast.close(toastId);