# Toast

> A transient notification panel that floats above page content to report the outcome of an action, colored by one of five semantic tones and structured like an inline status panel: an optional leading icon or loading graphic, a title/description block, and trailing actions.

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

Renders a single toast panel, tinted, bordered, and shadowed by
Toast.Props.color, with `role` and `aria-atomic` defaulted
(overridable); pair a `mix`-driven `enterExit()`, since it holds still.

## Examples

```tsx
<Toast color="success">
  <Toast.Icon><CircleCheckIcon /></Toast.Icon>
  <Toast.Content>
    <Toast.Title>{t("toasts.saved.title")}</Toast.Title>
    <Toast.Description>{t("toasts.saved.description")}</Toast.Description>
  </Toast.Content>
  <Toast.Close aria-label={t("actions.dismiss")} />
</Toast>
```

```tsx
<Toast color="danger" live="assertive">
  <Toast.Content>
    <Toast.Title>{t("toasts.uploadFailed.title")}</Toast.Title>
  </Toast.Content>
  <Toast.Action>{t("actions.retry")}</Toast.Action>
  <Toast.Cancel>{t("actions.dismiss")}</Toast.Cancel>
</Toast>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic tone of the toast. Default: `"neutral"`. |
| `live?` | `"polite" \| "assertive" \| "off"` | `aria-live` politeness for the toast's content. Default: `"polite"`. |
| `children` | `RemixNode` | The toast's compound parts: Toast.Icon, Toast.Content, Toast.Action, or any other content. |

Also accepts everything in `TagProps<"div">`.


### Toast.Icon

Renders Toast.IconProps.children as the toast's leading icon, hidden from assistive technology since the toast's color and text already carry its meaning; swap in Toast.Loader while pending.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The icon graphic, typically a single SVG icon. |

Also accepts everything in `TagProps<"div">`.


### Toast.Loader

Renders Toast.LoaderProps.children as the toast's loading graphic, laid out identically to Toast.Icon so swapping between them keeps the layout stable; pair a `spin()` `mix` factory for its rotating loop.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The loading graphic shown in place of Toast.Icon while the toast represents pending work. |

Also accepts everything in `TagProps<"div">`.


### Toast.Content

Renders Toast.ContentProps.children as the toast's body block: a column flex container that shrinks to fit alongside a leading icon or trailing action, holding Toast.Title and Toast.Description.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The toast's title, description, or other body content. |

Also accepts everything in `TagProps<"div">`.


### Toast.Title

Renders Toast.TitleProps.children as the toast's heading, in a native `<h3>` sized and weighted as a small, single-line label above the toast's description.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The toast's heading text. |

Also accepts everything in `TagProps<"h3">`.


### Toast.Description

Renders Toast.DescriptionProps.children as the toast's supporting message, in a native `<p>` set slightly translucent against the toast's foreground color so it reads as secondary to Toast.Title.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The toast's supporting message text. |

Also accepts everything in `TagProps<"p">`.


### Toast.Action

Renders Toast.ActionProps.children as the toast's primary trailing control; `type` defaults to `"button"`, ordered before the consumer's attributes so `command`/`commandfor` still run; use `type="submit"` for a form.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The action's label. |

Also accepts everything in `TagProps<"button">`.


### Toast.Cancel

Renders Toast.CancelProps.children as a neutral-tinted, secondary trailing control; `type` defaults to `"button"`, ordered before the consumer's attributes so `command`/`commandfor` still run.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The cancel control's label. |

Also accepts everything in `TagProps<"button">`.


### Toast.Close

Renders a dismiss control for the ancestor Toast: an icon-only `<button>` removable via a consumer's mixin or the `commandfor`/`command` pair; `type="button"` precedes those attributes so the pairing still runs.

| Prop | Type | Description |
| --- | --- | --- |
| `"aria-label"` | `string` | Accessible label for the icon-only control — required, since the button carries no visible text for assistive technology to read. |

Also accepts everything in `TagProps<"button">`.


### Toast.Region

Renders the fixed viewport stacking every queued Toast at a corner via Toast.RegionProps.placement; `pointer-events` stays `none` so clicks pass through to content behind, restored per toast.

| Prop | Type | Description |
| --- | --- | --- |
| `placement?` | `"top-start" \| "top-center" \| "top-end" \| "bottom-start" \| "bottom-center" \| "bottom-end"` | Corner of the viewport the stack renders in. Default: `"bottom-end"`. |
| `children` | `RemixNode` | Every currently queued Toast. |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic tone driving the host element's border, tint, and foreground color through the `--ui-*` variables for that color. |
| `Live` | `"polite" \| "assertive" \| "off"` | `aria-live` politeness applied to the host element. |
| `Placement` | `"top-start" \| "top-center" \| "top-end" \| "bottom-start" \| "bottom-center" \| "bottom-end"` | Corner of the viewport Toast.Region renders in. |