Toast

Display a temporary message.

<script lang="ts">
	import { toaster, Toaster, Toast, ToastTitle, ToastMessage } from 'lithesome';
	import { Button, cn } from '$site/index.js';
	import { scale } from 'svelte/transition';
	import { flip } from 'svelte/animate';
	import { XIcon, XCircleIcon, CheckCircleIcon, AlertCircleIcon, InfoIcon, StarIcon } from 'lucide-svelte';
	import type { ToastType } from 'lithesome';

	const types = [
		{
			type: 'success',
			config: {
				title: 'Profile updated.',
				message: 'Your profile details have been updated.'
			},
			icon: CheckCircleIcon,
			colour: 'text-emerald-500'
		},
		{
			type: 'warning',
			config: {
				title: 'Content removed.',
				message: 'This content is no longer available.'
			},
			icon: AlertCircleIcon,
			colour: 'text-yellow-500'
		},
		{
			type: 'error',
			config: {
				title: 'Validation errors.',
				message: 'The form has errors that are required to be amended.'
			},
			icon: XCircleIcon,
			colour: 'text-red-500'
		},
		{
			type: 'attention',
			config: {
				title: 'New update.',
				message: `We've dropped a new updated, check it out.`
			},
			icon: StarIcon,
			colour: 'text-blue-500'
		},
		{
			type: 'info',
			config: {
				title: 'Quick tip.',
				message: `You can press M1 to oingo boingo.`
			},
			icon: InfoIcon,
			colour: 'text-neutral-500'
		}
	];

	const getType = (type: string) => {
		const { icon, colour } = types.find((el) => el.type === type)!;
		return {
			icon,
			colour
		};
	};

	const addToast = () => {
		const data = types[Math.floor(Math.random() * types.length)];
		toaster.add(data.type as ToastType, data.config);
	};
</script>

<Button variant="primary" onclick={addToast}>Add Toast</Button>

<Toaster class="pointer-events-none fixed inset-0 z-10 flex flex-col items-end justify-end gap-2 p-6">
	{#snippet children(toasts)}
		{#each toasts as toast (toast.id)}
			{@const { icon: Icon, colour } = getType(toast.type)}
			<div
				in:scale={{ start: 0.75, opacity: 0, duration: 150 }}
				out:scale={{ duration: 150 }}
				animate:flip={{ duration: 150 }}
				class="origin-bottom-right"
			>
				<Toast
					class="dark:highlight group pointer-events-auto relative flex items-center gap-4 rounded-md bg-white px-5 py-4 shadow-lg dark:bg-neutral-900"
				>
					<Icon class="size-6 {colour}" />
					<div>
						<ToastTitle class="font-semibold text-black dark:text-white">{toast.config.title}</ToastTitle>
						<ToastMessage class="mt-2 text-sm">{toast.config.message}</ToastMessage>
						<button
							type="button"
							class={cn(
								'absolute -right-2 -top-2 rounded-full border border-transparent bg-white p-1.5 opacity-0 shadow-md transition-opacity',
								'dark:border-neutral-700 dark:bg-neutral-800 dark:shadow-none',
								'hover:text-black group-hover:opacity-100 dark:hover:text-white'
							)}
							onclick={() => toaster.removeById(toast.id)}
						>
							<XIcon class="size-3.5" />
						</button>
					</div>
				</Toast>
			</div>
		{/each}
	{/snippet}
</Toaster>

Prop	Type	Description
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`_`	`Toast[]`	The available toasts.

Data attribute	Value	Description
`data-toaster`	`''`	The base data attribute, can be used for styling.

Prop	Type	Description
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-toast`	`''`	The base data attribute, can be used for styling.

Prop	Type	Description
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLHeadingElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-toasttitle`	`''`	The base data attribute, can be used for styling.

Prop	Type	Description
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLParagraphElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-toastmessage`	`''`	The base data attribute, can be used for styling.

Event	Param & Return	Description
`add`	`(type,config)` `void`	Add a toast to the toaster.
`removeById`	`(toastId: string)` `void`	Remove a toast by its unique ID.

Basic Example

<script>
	import { Toaster, Toast, ToastTitle, ToastMessage } from 'lithesome';
</script>

<Toaster>
	{#snippet children(toasts)}
		{#each toasts as toast (toast.id)}
			<Toast>
				<ToastTitle />
				<ToastMessage />
			</Toast>
		{/each}
	{/snippet}
</Toaster>

Be sure to key your each block!

Adding a toast

To actually use the toasts, use the toaster object.

By using the add method, it will add a toast to the toaster.

<script>
	import { toaster } from 'lithesome';

	const addToast = () => {
		toaster.add('success', {
			title: 'Profile updated.',
			message: 'Your profile details have been updated.'
		});
	};
</script>

<button onclick={addToast}>Add toast</button>

Dismissing a toast early

Using the removeById allows you remove a singular toast early.

<script>
	import { toaster, Toaster, Toast, ToastTitle, ToastMessage } from 'lithesome';
</script>

<Toaster>
	{#snippet children(toasts)}
		{#each toasts as toast (toast.id)}
			<Toast>
				<ToastTitle />
				<ToastMessage />
				{#if toast.config.dismissable}
					<button onclick={() => toaster.removeById(toast.id)}>x</button>
				{/if}
			</Toast>
		{/each}
	{/snippet}
</Toaster>