Toast

A temporary notification message that appears and disappears automatically.

<script lang="ts">
import { Button, ToastProvider, toastManager } from "coss-svelte";
</script>

<ToastProvider>
	<Button
		variant="outline"
		onclick={() =>
			toastManager.add({
				title: "Event has been created",
				description: "Monday, January 3rd at 6:00pm",
			})}>Default Toast</Button
	>
</ToastProvider>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Toast, ToastProvider } from "coss-svelte";

Anatomy

Toast
ToastProvider

API Reference

Toast

A temporary notification message that appears and disappears automatically.

Prop	Type	Default	Description
`title`	`string`	`""`	Title text rendered by the component's built-in fallback layout.
`description`	`string`	`""`	Supporting text rendered by the component's built-in fallback layout.
`bind:open`	`boolean`	`false`	Open state for the popup or disclosure. Bind with `bind:open`.
`dismissible`	`boolean`	`true`	Shows a dismiss button that hides the toast when activated.
`closeLabel`	`string`	`"Dismiss notification"`	Accessible label for the toast dismiss button.
`ondismiss`	`(() => void)`	-	Called after the toast is dismissed.

children : Snippet<[]>

Inherits from Svelte <aside> attributes.

ToastProvider

Provides shared state and context to child components.

children : Snippet<[]>

Inherits from Svelte <div> attributes.

Implementation Details

Status: Experimental
Foundation: custom
Category: Feedback & Status
Particles: 13

Status

Experimental in 0.1.0: the provider, timed notifications, and manual dismissal are available; swipe dismissal, promise helpers, and advanced update controls are not yet supported.