# Toast

```ts
import { Toast } from 'cx/widgets';
```



Toasts are non-blocking notifications that appear at the edge of the screen. They inform users about events and can offer quick actions. Unlike modal dialogs, toasts don't interrupt the user's workflow.

```tsx
import { createModel } from "cx/data";
import { Button, Toast } from "cx/widgets";

interface PageModel {
  toast: {
    visible: boolean;
  };
}

const m = createModel<PageModel>();

export default (
  <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
    <Button
      onClick={(e, { store }) => {
        Toast.create({
          message: "This is a toast at the top.",
          placement: "top",
          timeout: 3000,
        }).open(store, { initiatingEvent: e });
      }}
    >
      Top
    </Button>
    <Button
      onClick={(e, { store }) => {
        Toast.create({
          message: "This is a toast on the right.",
          placement: "right",
          timeout: 3000,
        }).open(
          store,
          { initiatingEvent: e }, //required for mixed theming
        );
      }}
    >
      Right
    </Button>
    <Button
      onClick={(e, { store }) => {
        Toast.create({
          message: "This is a toast at the bottom.",
          placement: "bottom",
          timeout: 3000,
        }).open(
          store,
          { initiatingEvent: e }, //required for mixed theming
        );
      }}
    >
      Bottom
    </Button>
    <Button
      onClick={(e, { store }) => {
        Toast.create({
          message: "This is a toast on the left.",
          placement: "left",
          timeout: 3000,
        }).open(
          store,
          { initiatingEvent: e }, //required for mixed theming
        );
      }}
    >
      Left
    </Button>
  </div>
);

```

Toasts are created programmatically using `Toast.create()` and opened with the `open(store)` method. The `placement` prop controls which edge of the screen the toast appears on.

## Mods

Toasts support visual modifiers for different notification types: `primary`, `success`, `warning`, and `error`.

```tsx
import { Button, Toast } from "cx/widgets";

export default (
  <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
    <Button
      onClick={(e, { store }) => {
        Toast.create({
          message: "Primary notification",
          mod: "primary",
          timeout: 3000,
        }).open(
          store,
          { initiatingEvent: e }, //required for mixed theming
        );
      }}
    >
      Primary
    </Button>
    <Button
      onClick={(e, { store }) => {
        Toast.create({
          message: "Success! Operation completed.",
          mod: "success",
          timeout: 3000,
        }).open(
          store,
          { initiatingEvent: e }, //required for mixed theming
        );
      }}
    >
      Success
    </Button>
    <Button
      onClick={(e, { store }) => {
        Toast.create({
          message: "Warning: Please review your input.",
          mod: "warning",
          timeout: 3000,
        }).open(
          store,
          { initiatingEvent: e }, //required for mixed theming
        );
      }}
    >
      Warning
    </Button>
    <Button
      onClick={(e, { store }) => {
        Toast.create({
          message: "Error: Something went wrong.",
          mod: "error",
          timeout: 3000,
        }).open(
          store,
          { initiatingEvent: e }, //required for mixed theming
        );
      }}
    >
      Error
    </Button>
  </div>
);

```

## Declarative Toasts

Toasts can also be used declaratively with a `visible` binding. This is useful when the toast state needs to be tied to the application store:

```tsx
import { createModel } from "cx/data";
import { Button, Toast, TextField } from "cx/widgets";

interface PageModel {
  simpleToast: {
    visible: boolean;
  };
  complexToast: {
    visible: boolean;
    reply: string;
  };
}

const m = createModel<PageModel>();

export default (
  <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
    <Button
      onClick={(e, { store }) => {
        store.toggle(m.simpleToast.visible);
      }}
    >
      Toggle Simple Toast
    </Button>
    <Button
      onClick={(e, { store }) => {
        store.toggle(m.complexToast.visible);
      }}
    >
      Toggle Complex Toast
    </Button>

    <Toast visible={m.simpleToast.visible}>
      This toast is controlled by store state.
      <Button icon="close" dismiss mod="hollow" style={{ marginLeft: "8px" }} />
    </Toast>

    <Toast visible={m.complexToast.visible}>
      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
        <TextField value={m.complexToast.reply} placeholder="Quick reply..." />
        <Button icon="check" dismiss mod="primary" />
        <Button icon="close" dismiss />
      </div>
    </Toast>
  </div>
);

```

Add the `dismiss` prop to buttons that should close the toast when clicked.

## Configuration

| Property | Type | Description |
| -------- | ---- | ----------- |
| `message` | `StringProp` | Text message to display in the toast. |
| `placement` | `string` | Position on screen. Values: `top`, `right`, `bottom`, `left`, `top-left`, `top-right`, `bottom-left`, `bottom-right`. Default is `top`. |
| `timeout` | `NumberProp` | Time in milliseconds before auto-dismiss. If not set, toast stays until manually closed. |
| `pad` | `boolean` | Adds default padding. Default is `true`. |
| `mod` | `string` | Visual modifier. Values: `primary`, `success`, `warning`, `error`. |
| `visible` | `BooleanProp` | Controls toast visibility for declarative usage. |
| `animate` | `boolean` | Enables enter/leave animations. Default is `true`. |
| `destroyDelay` | `number` | Delay in milliseconds before removing from DOM after closing. Default is `300`. |