# Toast
Display brief messages to users.
```svelte
{#snippet children(toast)}
{toast.title}{toast.description}
{/snippet}
```
## Usage
This component acts as a Singleton - meaning you only implement a single instance (typically at the root scope of your app) and then reused it over and over. To do this, implement the `` at the root scope of your app (for SvelteKit this would be your root `+layout.svelte`), and use a shared `createToaster()` instance to trigger messages to that group from anywhere in your application.
## Type
```svelte
{#snippet children(toast)}
{toast.title}{toast.description}
{/snippet}
```
Types can be specified in one of two ways:
* Via a trigger method: `toaster.{info|success|warning|error}()`
* Via the object key: `type: {info|success|warning|error}`
## Action
Include an optional action button.
```svelte
{#snippet children(toast)}
{toast.title}{toast.description}
{#if toast.action}
{toast.action.label}
{/if}
{/snippet}
```
## Closable
By passing `closable: false` you can disable the close button.
```svelte
{#snippet children(toast)}
{toast.title}{toast.description}
{#if toast.closable}
{/if}
{/snippet}
```
## Placement
```svelte
{#snippet children(toast)}
{toast.title}{toast.description}
{/snippet}
```
## Meta
Use the `meta` key to provide arbitrary data. Then use this to modify your Toast template.
```svelte
{#snippet skull()}
{/snippet}
{#snippet children(toast)}
{@render toast.meta!.icon()}
{toast.title}{toast.description} {toast.meta?.foo}
{/snippet}
```
## Promise
Use promises for asynchronous triggers.
```svelte
{#snippet children(toast)}
{toast.title}{toast.description}
{/snippet}
```
## API Reference
### ToastRootProps
| Property | Default | Type | Description |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| toast | - | Options\ | - |
| element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |
### ToastRootContextProps
| Property | Default | Type | Description |
| -------- | ------- | -------------------------------------------- | ----------- |
| children | - | Snippet\<\[() => ToastApi\]> | - |
### ToastGroupProps
| Property | Default | Type | Description |
| --------- | ------- | ------------------------------------------------ | --------------------------- |
| toaster | - | ToastStore\ | - |
| children? | - | Snippet\<\[ToastProps\]> \| undefined | - |
| element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |
### ToastMessageProps
| Property | Default | Type | Description |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |
### ToastTitleProps
| Property | Default | Type | Description |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |
### ToastDescriptionProps
| Property | Default | Type | Description |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |
### ToastActionTriggerProps
| Property | Default | Type | Description |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | - | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |
### ToastCloseTriggerProps
| Property | Default | Type | Description |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | - | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |