Toasts

A small notification card that appears on the bottom right of the screen.

A ToastContainer must be put in +layout.svelte, then you can call toast().

Types

<Button
	color="secondary"
	class="w-max"
	on:click={() => toast({ content: 'Example toast', type: 'info' })}
>
	Info
</Button>

<Button
	color="none"
	class="bg-green-500 w-max"
	on:click={() => toast({ content: 'Example toast', type: 'success' })}
>
	Success
</Button>

<Button
	color="none"
	class="bg-yellow-500 w-max"
	on:click={() => toast({ content: 'Example toast', type: 'warning' })}
>
	Warning
</Button>

<Button
	color="danger"
	class="w-max"
	on:click={() => toast({ content: 'Example toast', type: 'error' })}
>
	Error
</Button>

Actions

The action property is a callback.

<Button
	color="secondary"
	class="w-max"
	on:click={() =>
		toast({ content: 'Example toast action', type: 'info', action: () => alert('clicked') })}
>
	Click me
</Button>