# Toasts

> The island that draws the page's one toast stack: server flash toasts and toasts raised through `pageToaster()` share a region, timing, pause on hover or focus, and close, so an app runs a single toast system.

```ts
import { Toasts } from "@sdxc/ui/app";
```

The app's one toast stack. A flash toast shows and closes without JavaScript;
hydration adopts the same element and only then starts its timer. Reach for a
toast last, after an inline message or a banner.

## Examples

```tsx
<Toasts labels={{ region: t("toasts.region"), dismiss: t("toasts.dismiss") }} initial={flash ? [flash] : []} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `labels` | `Toast.Labels` | Strings the region and its close buttons announce. |
| `initial?` | `Toast.Flash[]` | Toasts the server rendered from a session flash; hydration adopts each element and starts its timer. |
| `placement?` | `Toast.Placement` | Corner of the viewport. Default: `"bottom-end"`. |
| `max?` | `number` | Most toasts shown at once. Default: `3`. |
| `stack?` | `Toast.Stack` | Peek stack or plain list. Default: `"peek"`. |
| `queue?` | `string` | Which `pageToaster()` queue to draw; a page normally has one. Default: `"page"`. |