A component as well as a utility for displaying temporary, popup toast messages. This consists of the <Toasts /> component, and the toaster utility. The component serves only as a container for the toasts, and only one is needed. If you are using SvelteKit, it would generally go in your root +layout.svelte file. Otherwise, it can go in any root component, as long as it appears on every page.

toaster provides four methods for the four available message types: info , success , warning , and error . The only difference between the types is the background color. All four functions take in a string as a parameter, which will be the message that gets displayed.

Toasts will be automatically dismissed 8 seconds after they are displayed, and will show a countdown progress indicator while they are active. They can also be dismissed early by clicking anywhere in the toast body.

<script>
import {
	Toasts,
	toaster,
	Button
} from '@thetinkerinc/colibri';

import style from './style.js';

function toast(type) {
	return () => {
		const article = ['i', 'e'].includes(type[0])
			? 'an'
			: 'a';
		toaster[type](`Hello! I am ${article} ${type} toast`);
	};
}
</script>

<Toasts {style} />
<div id="buttons">
	<Button on:click={toast('info')}>Info</Button>
	<Button on:click={toast('success')}>Success</Button>
	<Button on:click={toast('warning')}>Warning</Button>
	<Button on:click={toast('error')}>Error</Button>
</div>

<style>
#buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
</style>

//style.js
export default style = {};