Toast

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.

 <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)
    }}
  >
    Top
  </Button>
  <Button
    onClick={(e, { store }) => {
      Toast.create({
        message: "This is a toast on the right.",
        placement: "right",
        timeout: 3000,
      }).open(store)
    }}
  >
    Right
  </Button>
  <Button
    onClick={(e, { store }) => {
      Toast.create({
        message: "This is a toast at the bottom.",
        placement: "bottom",
        timeout: 3000,
      }).open(store)
    }}
  >
    Bottom
  </Button>
  <Button
    onClick={(e, { store }) => {
      Toast.create({
        message: "This is a toast on the left.",
        placement: "left",
        timeout: 3000,
      }).open(store)
    }}
  >
    Left
  </Button>
</div> 
 interface PageModel {
  toast: {
    visible: boolean;
  };
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { Button, Toast } from "cx/widgets"; 

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.

 <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
  <Button
    onClick={(e) => {
      Toast.create({
        message: "Primary notification",
        mod: "primary",
        timeout: 3000,
      }).open()
    }}
  >
    Primary
  </Button>
  <Button
    onClick={(e, { store }) => {
      Toast.create({
        message: "Success! Operation completed.",
        mod: "success",
        timeout: 3000,
      }).open()
    }}
  >
    Success
  </Button>
  <Button
    onClick={(e) => {
      Toast.create({
        message: "Warning: Please review your input.",
        mod: "warning",
        timeout: 3000,
      }).open()
    }}
  >
    Warning
  </Button>
  <Button
    onClick={(e) => {
      Toast.create({
        message: "Error: Something went wrong.",
        mod: "error",
        timeout: 3000,
      }).open()
    }}
  >
    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:

 <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> 
 interface PageModel {
  simpleToast: {
    visible: boolean;
  };
  complexToast: {
    visible: boolean;
    reply: string;
  };
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { Button, Toast, TextField } from "cx/widgets"; 

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