Toast

A brief notification that appears temporarily to inform users of an action or event.

Anatomy

<script>
  import { Toaster, createToaster } from "@saas-ui/svelte/components/toast";

  const toaster = createToaster({ placement: "top-end" });
</script>

<button
  onclick={() => toaster.create({
    title: "Toast title",
    description: "Toast description",
    status: "success",
  })}
>
  Show Toast
</button>

<Toaster {toaster} />

Examples

Basic Accessibility

Basic toast triggered by a button.

<ToastStoryWrapper>
	<Button
		onclick={() =>
			toaster.create({
				description: "This is a toast notification.",
				type: "info",
			})}
	>
		Show Toast
	</Button>
</ToastStoryWrapper>

Default Accessibility

Static toast preview without toaster.

<Toast
	status="info"
	title="Toast Title"
	description="This is a toast description."
/>

Duration Accessibility

Toast with different duration values.

<ToastStoryWrapper>
	<HStack gap={2} class="flex-wrap">
		<Button
			onclick={() =>
				toaster.create({
					description: "This will disappear quickly.",
					type: "info",
					duration: 1000,
				})}
		>
			1 Second
		</Button>
		<Button
			onclick={() =>
				toaster.create({
					description: "This uses the default duration.",
					type: "info",
					duration: 5000,
				})}
		>
			5 Seconds
		</Button>
		<Button
			onclick={() =>
				toaster.create({
					description: "This will stay until dismissed.",
					type: "info",
					duration: Infinity,
				})}
		>
			Persistent
		</Button>
	</HStack>
</ToastStoryWrapper>

Stacking Accessibility

Multiple toasts stacking.

<ToastStoryWrapper>
	<HStack gap={2} class="flex-wrap">
		<Button
			onclick={() => {
				stackCount++;
				toaster.create({
					description: "File saved successfully",
					type: ["info", "success", "warning", "error"][
						stackCount % 4
					] as ToastStatus,
					duration: 10000,
				});
			}}
		>
			Add Toast
		</Button>
		<Button
			variant="outline"
			onclick={() => {
				for (let i = 0; i < 5; i++) {
					setTimeout(() => {
						stackCount++;
						toaster.create({
							description: "File saved successfully",
							type: ["info", "success", "warning", "error"][
								stackCount % 4
							] as ToastStatus,
							duration: 15000,
						});
					}, i * 100);
				}
			}}
		>
			Add 5 Toasts
		</Button>
	</HStack>
</ToastStoryWrapper>

Status Accessibility

Toast with different status types.

<ToastStoryWrapper>
	<HStack gap={2} class="flex-wrap">
		<Button
			colour="blue"
			onclick={() =>
				toaster.create({
					description: "Here is some useful information.",
					type: "info",
				})}
		>
			Info
		</Button>
		<Button
			colour="green"
			onclick={() =>
				toaster.create({
					description: "Your changes have been saved.",
					type: "success",
				})}
		>
			Success
		</Button>
		<Button
			colour="orange"
			onclick={() =>
				toaster.create({
					description: "This action cannot be undone.",
					type: "warning",
				})}
		>
			Warning
		</Button>
		<Button
			colour="red"
			onclick={() =>
				toaster.create({
					description: "Something went wrong. Please try again.",
					type: "error",
				})}
		>
			Error
		</Button>
		<Button
			colour="gray"
			onclick={() =>
				toaster.create({
					description:
						"Please wait while we process your request.",
					type: "loading",
				})}
		>
			Loading
		</Button>
	</HStack>
</ToastStoryWrapper>

With Action Accessibility

Toast with an action button.

<ToastStoryWrapper>
	<Button
		onclick={() =>
			toaster.create({
				title: "Update successful",
				description: "File saved successfully to the server",
				type: "success",
				action: {
					label: "Undo",
					onClick: () => console.log("Undo clicked"),
				},
			})}
	>
		Show Toast with Action
	</Button>
</ToastStoryWrapper>

Props

Toast

The toast notification component that displays a message.

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply.
`status`	`"info" \| "success" \| "warning" \| "error" \| "loading"`	`"info"`	The status/type of the toast notification.
`icon`	`boolean \| Component`	-	Custom icon component, or false to hide the icon.
`title`	`string`	-	The title text of the toast.
`description`	`string`	-	The description text of the toast.
`action`	`{ label: string; onClick?: () => void }`	-	An action button to display in the toast.
`closable`	`boolean`	`true`	Whether the toast can be dismissed.
`onclose`	`() => void`	-	Callback invoked when the toast is closed.
`children`	`Snippet`	-	Custom content to render inside the toast.

Toaster

The container component that renders and manages toast notifications from a toaster store.

Prop	Type	Default	Description
`toaster`	`ToasterStore`	-	The toaster store instance created by createToaster().
`class`	`string`	-	Additional CSS classes to apply.

createToaster

A function that creates a toaster store for managing toast notifications.

Prop	Type	Default	Description
`placement`	`"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end"`	`"bottom-end"`	The placement of the toast notifications.
`duration`	`number`	`5000`	The default duration in milliseconds before toasts auto-dismiss.
`gap`	`number`	-	The gap between stacked toasts.
`overlap`	`boolean`	-	Whether toasts should overlap.