Toast

tsx

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Default() {
	const toaster = createToaster();

	return (
		<>
			<button
				className="btn preset-filled"
				onClick={() =>
					toaster.info({
						title: 'Title',
						description: 'This is a description.',
					})
				}
			>
				Toast
			</button>
			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
							<Toast.Title>{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						<Toast.CloseTrigger />
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

svelte

<script lang="ts">
	import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

	const toaster = createToaster();
</script>

<button
	class="btn preset-filled"
	onclick={() =>
		toaster.info({
			title: 'Title',
			description: 'This is a description.',
		})}
>
	Toast
</button>

<Toast.Group {toaster}>
	{#snippet children(toast)}
		<Toast {toast}>
			<Toast.Message>
				<Toast.Title>{toast.title}</Toast.Title>
				<Toast.Description>{toast.description}</Toast.Description>
			</Toast.Message>
			<Toast.CloseTrigger />
		</Toast>
	{/snippet}
</Toast.Group>

Usage

This component acts as a Singleton. Implement a single instance of <Toast.Group> in the root scope your application, then trigger it anywhere on demand using a shared createToaster() instance.

tsx

import { toaster } from '/some/path/toaster.ts';
import { Toast } from '@skeletonlabs/skeleton-react';
import type { PropsWithChildren } from 'react';

export default function Layout(props: PropsWithChildren) {
	return (
		<>
			{props.children}
			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
						<Toast.Title>{toast.title}</Toast.Title>
						<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						<Toast.CloseTrigger />
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

svelte

<script lang="ts">
	import { toaster } from '/some/path/toaster.ts';
	import { Toast } from '@skeletonlabs/skeleton-svelte';
	import type { Snippet } from 'svelte';

	interface Props {
		children?: Snippet;
	}

	const props: Props = $props();
</script>

{@render props.children?.()}

<Toast.Group {toaster}>
	{#snippet children(toast)}
		<Toast toast={toast}>
			<Toast.Message>
			<Toast.Title>{toast.title}</Toast.Title>
			<Toast.Description>{toast.description}</Toast.Description>
			</Toast.Message>
			<Toast.CloseTrigger />
		</Toast>
	{/snippet}
</Toast.Group>

tsx

import { toaster } from '/some/path/toaster.ts';

export default function Page() {
	function onClickHandler() {
		toaster.info({ title: 'Example', description: 'This is a toast message.' });
	}
	return ();
}

svelte

<script lang="ts">
	import { toaster } from '/some/path/toaster.ts';

	function onClickHandler() {
		toaster.info({ title: 'Example', description: 'This is a toast message.' });
	}

</script>

Triggers

Shorthand methods are available for toast triggers, including: info(), success(), warning(), and error().

tsx

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Type() {
	const toaster = createToaster();

	return (
		<>
			<div className="grid grid-cols-2 gap-2">
				<button
					className="btn preset-filled"
					onClick={() =>
						toaster.info({
							title: 'Info',
							description: 'This is an info toast.',
						})
					}
				>
					Info
				</button>
				<button
					className="btn preset-filled-success-500"
					onClick={() =>
						toaster.success({
							title: 'Success',
							description: 'This is a success toast.',
						})
					}
				>
					Success
				</button>
				<button
					className="btn preset-filled-warning-500"
					onClick={() =>
						toaster.warning({
							title: 'Warning',
							description: 'This is a warning toast.',
						})
					}
				>
					Warning
				</button>
				<button
					className="btn preset-filled-error-500"
					onClick={() =>
						toaster.error({
							title: 'Error',
							description: 'This is an error toast.',
						})
					}
				>
					Error
				</button>
			</div>
			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
							<Toast.Title>{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						<Toast.CloseTrigger />
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

svelte

<script lang="ts">
	import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

	const toaster = createToaster();
</script>

<div class="grid grid-cols-2 gap-2">
	<button
		class="btn preset-filled"
		onclick={() =>
			toaster.info({
				title: 'Info',
				description: 'This is an info toast.',
			})}
	>
		Info
	</button>
	<button
		class="btn preset-filled-success-500"
		onclick={() =>
			toaster.success({
				title: 'Success',
				description: 'This is a success toast.',
			})}
	>
		Success
	</button>
	<button
		class="btn preset-filled-warning-500"
		onclick={() =>
			toaster.warning({
				title: 'Warning',
				description: 'This is a warning toast.',
			})}
	>
		Warning
	</button>
	<button
		class="btn preset-filled-error-500"
		onclick={() =>
			toaster.error({
				title: 'Error',
				description: 'This is an error toast.',
			})}
	>
		Error
	</button>
</div>

<Toast.Group {toaster}>
	{#snippet children(toast)}
		<Toast {toast}>
			<Toast.Message>
				<Toast.Title>{toast.title}</Toast.Title>
				<Toast.Description>{toast.description}</Toast.Description>
			</Toast.Message>
			<Toast.CloseTrigger />
		</Toast>
	{/snippet}
</Toast.Group>

Or use the generic create() method to trigger toasts of any type: info|success|warning|error.

toaster.create({
	type: 'info',
	title: 'This is a toast',
	description: 'This is a toast description.',
});

Placement

Set the placement value in your createToaster instance to define the global screen position.

tsx

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Placement() {
	const toaster = createToaster({
		placement: 'bottom-end',
	});

	return (
		<>
			<button
				className="btn preset-filled"
				onClick={() =>
					toaster.info({
						title: 'Title',
						description: 'This is a description.',
					})
				}
			>
				Toast
			</button>
			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
							<Toast.Title>{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						<Toast.CloseTrigger />
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

svelte

<script lang="ts">
	import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

	const toaster = createToaster({
		placement: 'bottom-end',
	});
</script>

<button
	class="btn preset-filled"
	onclick={() =>
		toaster.info({
			title: 'Title',
			description: 'This is a description.',
		})}
>
	Toast
</button>

<Toast.Group {toaster}>
	{#snippet children(toast)}
		<Toast {toast}>
			<Toast.Message>
				<Toast.Title>{toast.title}</Toast.Title>
				<Toast.Description>{toast.description}</Toast.Description>
			</Toast.Message>
			<Toast.CloseTrigger />
		</Toast>
	{/snippet}
</Toast.Group>

Overlap

Use the overlap option in your createToaster instance to enable overlapping toasts.

tsx

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Default() {
	const toaster = createToaster({
		overlap: true,
	});

	return (
		<>
			<button
				className="btn preset-filled"
				onClick={() =>
					toaster.info({
						title: 'Title',
						description: 'This is a description.',
					})
				}
			>
				Toast
			</button>
			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
							<Toast.Title>{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						<Toast.CloseTrigger />
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

svelte

<script lang="ts">
	import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

	const toaster = createToaster({
		overlap: true,
	});
</script>

<button
	class="btn preset-filled"
	onclick={() =>
		toaster.info({
			title: 'Title',
			description: 'This is a description.',
		})}
>
	Toast
</button>

<Toast.Group {toaster}>
	{#snippet children(toast)}
		<Toast {toast}>
			<Toast.Message>
				<Toast.Title>{toast.title}</Toast.Title>
				<Toast.Description>{toast.description}</Toast.Description>
			</Toast.Message>
			<Toast.CloseTrigger />
		</Toast>
	{/snippet}
</Toast.Group>

Note: Hovering over the toast group will expand all the toasts.

Closable

Use the closable prop to toggle display of the close button.

tsx

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Closable() {
	const toaster = createToaster();

	return (
		<>
			<button
				className="btn preset-filled"
				onClick={() =>
					toaster.info({
						title: 'Title',
						description: 'This is a description.',
						closable: false,
					})
				}
			>
				Toast
			</button>
			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
							<Toast.Title>{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						{toast.closable && <Toast.CloseTrigger />}
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

svelte

<script lang="ts">
	import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

	const toaster = createToaster();
</script>

<button
	class="btn preset-filled"
	onclick={() =>
		toaster.info({
			title: 'Title',
			description: 'This is a description.',
			closable: false,
		})}
>
	Toast
</button>

<Toast.Group {toaster}>
	{#snippet children(toast)}
		<Toast {toast}>
			<Toast.Message>
				<Toast.Title>{toast.title}</Toast.Title>
				<Toast.Description>{toast.description}</Toast.Description>
			</Toast.Message>
			{#if toast.closable}
				<Toast.CloseTrigger />
			{/if}
		</Toast>
	{/snippet}
</Toast.Group>

Promise

Toasts support asynchronous updates using promises.

tsx

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Promise_() {
	const toaster = createToaster();

	function generatePositiveNumber() {
		return new Promise<number>((resolve, reject) => {
			setTimeout(() => {
				const number = Math.random() - 0.5;
				if (number > 0) {
					resolve(number);
				} else {
					reject(number);
				}
			}, 2000);
		});
	}

	return (
		<>
			<button
				className="btn preset-filled"
				onClick={() =>
					toaster.promise(generatePositiveNumber(), {
						loading: {
							title: 'Loading...',
							description: 'Please wait while generating your number',
						},
						success: (number) => ({
							title: 'Success',
							description: `Your number is ${number.toFixed(2)}`,
						}),
						error: (number) => ({
							title: 'Error',
							description: `Your number is ${(number as number).toFixed(2)}`,
						}),
					})
				}
			>
				Toast
			</button>

			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
							<Toast.Title>{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						<Toast.CloseTrigger />
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

svelte

<script lang="ts">
	import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

	const toaster = createToaster();

	function generatePositiveNumber() {
		return new Promise<number>((resolve, reject) => {
			setTimeout(() => {
				const number = Math.random() - 0.5;
				if (number > 0) {
					resolve(number);
				} else {
					reject(number);
				}
			}, 2000);
		});
	}
</script>

<button
	class="btn preset-filled"
	onclick={() =>
		toaster.promise(generatePositiveNumber(), {
			loading: {
				title: 'Loading...',
				description: 'Please wait while generating your number',
			},
			success: (number) => ({
				title: 'Success',
				description: `Your number is ${number}`,
			}),
			error: (number) => ({
				title: 'Error',
				description: `Your number is ${number}`,
			}),
		})}
>
	Toast
</button>

<Toast.Group {toaster}>
	{#snippet children(toast)}
		<Toast {toast}>
			<Toast.Message>
				<Toast.Title>{toast.title}</Toast.Title>
				<Toast.Description>{toast.description}</Toast.Description>
			</Toast.Message>
			<Toast.CloseTrigger />
		</Toast>
	{/snippet}
</Toast.Group>

Anatomy

Here’s an overview of how the Toast component is structured in code:

tsx

import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<Toast.Group>
			<Toast>
				<Toast.Message>
					<Toast.Title />
					<Toast.Description />
				</Toast.Message>
				<Toast.CloseTrigger />
			</Toast>
		</Toast.Group>
	);
}

svelte

<script lang="ts">
	import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';
</script>

<Toast.Group>
	<Toast>
		<Toast.Message>
			<Toast.Title />
			<Toast.Description />
		</Toast.Message>
		<Toast.CloseTrigger />
	</Toast>
</Toast.Group>

API Reference

Unable to load component information for react/toast

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Usage

Triggers

Placement

Overlap

Closable

Meta

Promise

Anatomy

API Reference