# Toast

A temporary notification message that appears and disappears automatically.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<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>

```

## 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. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <aside> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### ToastProvider

Provides shared state and context to child components.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <div> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| 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.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/toast.json` for the complete local file and dependency closure.
- Treat Toast as experimental and preserve the limitations described in Status.