# Toast

Viewport notifications for success, attention, errors, and information.

URL: https://webrad.atentor.com/docs/toast
Updated: 2026-11-07

WebToast · Nonvisual · Visual · 2 events

## Quick start

Add **Toast1** in the Designer. Use the example in a page method.

```ts
Toast1.Success('Saved successfully');
```

Use Success, Alert, Danger or Notifier with a text message. Duration defaults to 4000 ms; zero keeps the notification open until dismissed.

- Insert Toast from the nonvisual tray. Choose Duration, Position, state icons, and a Toast style in the Inspector.
- Success(message), Alert(message), Danger(message), and Notifier(message) display text notifications. Clear() dismisses this instance's notifications.
- Duration is in milliseconds; zero keeps notifications open. Notifications stack by position and are removed with their page or reusable placement.
- OnShow and OnClose provide message and state through CustomEvent<WebToastEventDetail>. The public Success method uses the existing Sucess state identifier.

## Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

| Property / source | Type and options | Default | Runtime access |
| --- | --- | --- | --- |
| `name` — Name · Identity | `string` | `—` | name |
| `duration` — Duration (ms) · Behavior — Time visible in milliseconds. Zero keeps the notification until dismissed. | `number` | `4000` | duration |
| `position` — Position · Behavior | `enum` — `top-left` `top-center` `top-right` `middle-left` `middle-center` `middle-right` `bottom-left` `bottom-center` `bottom-right` | `"top-right"` | position |
| `sucessIcon` — Sucess icon · Icons — Icon shown for this state. An empty value hides the icon. | `icon`214 options — `` `add` `chevron-down` `chevron-right` `close` `delete` `folder-open` `info` `layers` `lightbulb` `palette` `page` `play` `redo` `save` `search` `settings` `style` `undo` `arrow-left` `arrow-right` `arrow-up` `arrow-down` `chevron-left` `chevron-up` `chevrons-left` `chevrons-right` `chevrons-up` `chevrons-down` `menu` `more-horizontal` `more-vertical` `home` `external-link` `check` `check-circle` `check-square` `minus` `minus-circle` `plus-circle` `edit` `copy` `cut` `clipboard` `download` `upload` `refresh` `link` `unlink` `share` `send` `printer` `archive` `eye` `eye-off` `lock` `unlock` `filter` `sort-asc` `sort-desc` `warning` `alert-circle` `help-circle` `bell` `bookmark` `flag` `heart` `star` `folder` `file` `file-plus` `file-text` `text` `image` `camera` `database` `table` `list` `grid` `chart-bar` `chart-line` `code` `terminal` `cloud` `upload-cloud` `download-cloud` `user` `users` `user-plus` `mail` `phone` `globe` `map-pin` `calendar` `clock` `pause` `stop` `skip-back` `skip-forward` `volume-2` `volume-x` `video` `login` `logout` `sign-in` `sign-out` `door-in` `door-out` `door-open` `door-closed` `key` `key-round` `shield` `shield-check` `shield-alert` `shield-x` `fingerprint` `badge-check` `id-card` `user-check` `user-x` `user-minus` `user-round` `contact` `accessibility` `password` `at-sign` `scan-face` `circle` `circle-dot` `square` `move` `maximize` `minimize` `expand` `shrink` `fullscreen` `panel-left` `panel-right` `panel-top` `panel-bottom` `sidebar-left` `sidebar-right` `layout` `columns` `rows` `align-left` `align-center` `align-right` `align-justify` `rotate-cw` `rotate-ccw` `repeat` `folder-plus` `folder-minus` `folder-x` `folder-search` `folder-check` `folder-lock` `file-minus` `file-x` `file-check` `file-code` `file-image` `file-video` `file-audio` `file-archive` `file-lock` `file-search` `file-copy` `files` `hard-drive` `server` `cpu` `monitor` `laptop` `smartphone` `tablet` `wifi` `bluetooth` `message-circle` `message-square` `messages-square` `message-plus` `message-x` `inbox` `outbox` `reply` `reply-all` `forward-mail` `paperclip` `attachment` `rss` `megaphone` `microphone` `microphone-off` `headset` `radio` `sms` `cart` `shopping-bag` `credit-card` `receipt` `wallet` `dollar-sign` `percent` `tags` `gift` `truck` `building` `briefcase` `target` `trophy` `toggle-right` | `"check-circle"` | sucessIcon |
| `alertIcon` — Alert icon · Icons — Icon shown for this state. An empty value hides the icon. | `icon`214 options — `` `add` `chevron-down` `chevron-right` `close` `delete` `folder-open` `info` `layers` `lightbulb` `palette` `page` `play` `redo` `save` `search` `settings` `style` `undo` `arrow-left` `arrow-right` `arrow-up` `arrow-down` `chevron-left` `chevron-up` `chevrons-left` `chevrons-right` `chevrons-up` `chevrons-down` `menu` `more-horizontal` `more-vertical` `home` `external-link` `check` `check-circle` `check-square` `minus` `minus-circle` `plus-circle` `edit` `copy` `cut` `clipboard` `download` `upload` `refresh` `link` `unlink` `share` `send` `printer` `archive` `eye` `eye-off` `lock` `unlock` `filter` `sort-asc` `sort-desc` `warning` `alert-circle` `help-circle` `bell` `bookmark` `flag` `heart` `star` `folder` `file` `file-plus` `file-text` `text` `image` `camera` `database` `table` `list` `grid` `chart-bar` `chart-line` `code` `terminal` `cloud` `upload-cloud` `download-cloud` `user` `users` `user-plus` `mail` `phone` `globe` `map-pin` `calendar` `clock` `pause` `stop` `skip-back` `skip-forward` `volume-2` `volume-x` `video` `login` `logout` `sign-in` `sign-out` `door-in` `door-out` `door-open` `door-closed` `key` `key-round` `shield` `shield-check` `shield-alert` `shield-x` `fingerprint` `badge-check` `id-card` `user-check` `user-x` `user-minus` `user-round` `contact` `accessibility` `password` `at-sign` `scan-face` `circle` `circle-dot` `square` `move` `maximize` `minimize` `expand` `shrink` `fullscreen` `panel-left` `panel-right` `panel-top` `panel-bottom` `sidebar-left` `sidebar-right` `layout` `columns` `rows` `align-left` `align-center` `align-right` `align-justify` `rotate-cw` `rotate-ccw` `repeat` `folder-plus` `folder-minus` `folder-x` `folder-search` `folder-check` `folder-lock` `file-minus` `file-x` `file-check` `file-code` `file-image` `file-video` `file-audio` `file-archive` `file-lock` `file-search` `file-copy` `files` `hard-drive` `server` `cpu` `monitor` `laptop` `smartphone` `tablet` `wifi` `bluetooth` `message-circle` `message-square` `messages-square` `message-plus` `message-x` `inbox` `outbox` `reply` `reply-all` `forward-mail` `paperclip` `attachment` `rss` `megaphone` `microphone` `microphone-off` `headset` `radio` `sms` `cart` `shopping-bag` `credit-card` `receipt` `wallet` `dollar-sign` `percent` `tags` `gift` `truck` `building` `briefcase` `target` `trophy` `toggle-right` | `"warning"` | alertIcon |
| `dangerIcon` — Danger icon · Icons — Icon shown for this state. An empty value hides the icon. | `icon`214 options — `` `add` `chevron-down` `chevron-right` `close` `delete` `folder-open` `info` `layers` `lightbulb` `palette` `page` `play` `redo` `save` `search` `settings` `style` `undo` `arrow-left` `arrow-right` `arrow-up` `arrow-down` `chevron-left` `chevron-up` `chevrons-left` `chevrons-right` `chevrons-up` `chevrons-down` `menu` `more-horizontal` `more-vertical` `home` `external-link` `check` `check-circle` `check-square` `minus` `minus-circle` `plus-circle` `edit` `copy` `cut` `clipboard` `download` `upload` `refresh` `link` `unlink` `share` `send` `printer` `archive` `eye` `eye-off` `lock` `unlock` `filter` `sort-asc` `sort-desc` `warning` `alert-circle` `help-circle` `bell` `bookmark` `flag` `heart` `star` `folder` `file` `file-plus` `file-text` `text` `image` `camera` `database` `table` `list` `grid` `chart-bar` `chart-line` `code` `terminal` `cloud` `upload-cloud` `download-cloud` `user` `users` `user-plus` `mail` `phone` `globe` `map-pin` `calendar` `clock` `pause` `stop` `skip-back` `skip-forward` `volume-2` `volume-x` `video` `login` `logout` `sign-in` `sign-out` `door-in` `door-out` `door-open` `door-closed` `key` `key-round` `shield` `shield-check` `shield-alert` `shield-x` `fingerprint` `badge-check` `id-card` `user-check` `user-x` `user-minus` `user-round` `contact` `accessibility` `password` `at-sign` `scan-face` `circle` `circle-dot` `square` `move` `maximize` `minimize` `expand` `shrink` `fullscreen` `panel-left` `panel-right` `panel-top` `panel-bottom` `sidebar-left` `sidebar-right` `layout` `columns` `rows` `align-left` `align-center` `align-right` `align-justify` `rotate-cw` `rotate-ccw` `repeat` `folder-plus` `folder-minus` `folder-x` `folder-search` `folder-check` `folder-lock` `file-minus` `file-x` `file-check` `file-code` `file-image` `file-video` `file-audio` `file-archive` `file-lock` `file-search` `file-copy` `files` `hard-drive` `server` `cpu` `monitor` `laptop` `smartphone` `tablet` `wifi` `bluetooth` `message-circle` `message-square` `messages-square` `message-plus` `message-x` `inbox` `outbox` `reply` `reply-all` `forward-mail` `paperclip` `attachment` `rss` `megaphone` `microphone` `microphone-off` `headset` `radio` `sms` `cart` `shopping-bag` `credit-card` `receipt` `wallet` `dollar-sign` `percent` `tags` `gift` `truck` `building` `briefcase` `target` `trophy` `toggle-right` | `"alert-circle"` | dangerIcon |
| `notifierIcon` — Notifier icon · Icons — Icon shown for this state. An empty value hides the icon. | `icon`214 options — `` `add` `chevron-down` `chevron-right` `close` `delete` `folder-open` `info` `layers` `lightbulb` `palette` `page` `play` `redo` `save` `search` `settings` `style` `undo` `arrow-left` `arrow-right` `arrow-up` `arrow-down` `chevron-left` `chevron-up` `chevrons-left` `chevrons-right` `chevrons-up` `chevrons-down` `menu` `more-horizontal` `more-vertical` `home` `external-link` `check` `check-circle` `check-square` `minus` `minus-circle` `plus-circle` `edit` `copy` `cut` `clipboard` `download` `upload` `refresh` `link` `unlink` `share` `send` `printer` `archive` `eye` `eye-off` `lock` `unlock` `filter` `sort-asc` `sort-desc` `warning` `alert-circle` `help-circle` `bell` `bookmark` `flag` `heart` `star` `folder` `file` `file-plus` `file-text` `text` `image` `camera` `database` `table` `list` `grid` `chart-bar` `chart-line` `code` `terminal` `cloud` `upload-cloud` `download-cloud` `user` `users` `user-plus` `mail` `phone` `globe` `map-pin` `calendar` `clock` `pause` `stop` `skip-back` `skip-forward` `volume-2` `volume-x` `video` `login` `logout` `sign-in` `sign-out` `door-in` `door-out` `door-open` `door-closed` `key` `key-round` `shield` `shield-check` `shield-alert` `shield-x` `fingerprint` `badge-check` `id-card` `user-check` `user-x` `user-minus` `user-round` `contact` `accessibility` `password` `at-sign` `scan-face` `circle` `circle-dot` `square` `move` `maximize` `minimize` `expand` `shrink` `fullscreen` `panel-left` `panel-right` `panel-top` `panel-bottom` `sidebar-left` `sidebar-right` `layout` `columns` `rows` `align-left` `align-center` `align-right` `align-justify` `rotate-cw` `rotate-ccw` `repeat` `folder-plus` `folder-minus` `folder-x` `folder-search` `folder-check` `folder-lock` `file-minus` `file-x` `file-check` `file-code` `file-image` `file-video` `file-audio` `file-archive` `file-lock` `file-search` `file-copy` `files` `hard-drive` `server` `cpu` `monitor` `laptop` `smartphone` `tablet` `wifi` `bluetooth` `message-circle` `message-square` `messages-square` `message-plus` `message-x` `inbox` `outbox` `reply` `reply-all` `forward-mail` `paperclip` `attachment` `rss` `megaphone` `microphone` `microphone-off` `headset` `radio` `sms` `cart` `shopping-bag` `credit-card` `receipt` `wallet` `dollar-sign` `percent` `tags` `gift` `truck` `building` `briefcase` `target` `trophy` `toggle-right` | `"info"` | notifierIcon |

## API in code

| Member | Signature | Access |
| --- | --- | --- |
| `duration` | `duration: number;` | Read and write |
| `position` | `position: WebToastPosition;` | Read and write |
| `sucessIcon` | `sucessIcon: WebButtonIcon \| '';` | Read and write |
| `alertIcon` | `alertIcon: WebButtonIcon \| '';` | Read and write |
| `dangerIcon` | `dangerIcon: WebButtonIcon \| '';` | Read and write |
| `notifierIcon` | `notifierIcon: WebButtonIcon \| '';` | Read and write |
| `onShow` | `set onShow(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onClose` | `set onClose(handler: WebComponentEventHandler<this> \| null);` | Read and write |

### `Success`

method

```ts
Success(message: string): void;
```

Example

```ts
Toast1.Success('Saved successfully');
```

### `Alert`

method

```ts
Alert(message: string): void;
```

Example

```ts
Toast1.Alert('Please check the form');
```

### `Danger`

method

```ts
Danger(message: string): void;
```

Example

```ts
Toast1.Danger('Unable to save');
```

### `Notifier`

method

```ts
Notifier(message: string): void;
```

Example

```ts
Toast1.Notifier('A new message arrived');
```

### `Clear`

method

```ts
Clear(): void;
```

Example

```ts
Toast1.Clear();
```

Inherited members (27)

| Member | Signature | Access |
| --- | --- | --- |
| `currentRowBindings` | `currentRowBindings: readonly WebCurrentRowBinding[];` | Read and write |
| `element` | `readonly element: TElement;` | Read-only |
| `id` | `readonly id: string;` | Read-only |
| `name` | `readonly name: string;` | Read-only |
| `visible` | `visible: boolean;` | Read and write |
| `collapseWhenHidden` | `collapseWhenHidden: boolean;` | Read and write |
| `enabled` | `enabled: boolean;` | Read and write |
| `x` | `x: number;` | Read and write |
| `y` | `y: number;` | Read and write |
| `width` | `width: number;` | Read and write |
| `height` | `height: number;` | Read and write |
| `margin` — Outer spacing on all four sides, in pixels. | `margin: number;` | Read and write |
| `marginTop` | `marginTop: number;` | Read and write |
| `marginRight` | `marginRight: number;` | Read and write |
| `marginBottom` | `marginBottom: number;` | Read and write |
| `marginLeft` | `marginLeft: number;` | Read and write |
| `alignSelf` | `alignSelf: RuntimeLayoutAlignSelf;` | Read and write |
| `tabIndex` | `tabIndex: number;` | Read and write |
| `backgroundColor` | `backgroundColor: string;` | Read and write |
| `color` | `color: string;` | Read and write |
| `borderColor` | `borderColor: string;` | Read and write |

### `focus`

method

```ts
focus(options?: FocusOptions): void;
```

### `show`

method

```ts
show(): void;
```

### `hide`

method

```ts
hide(): void;
```

### `bindEvent`

method

```ts
bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;
```

### `emit`

method

```ts
emit(eventName: string, detail?: unknown): boolean;
```

### `dispose`

method

```ts
dispose(): void;
```

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnShow

[WebToastEventDetail](https://webrad.atentor.com/docs/types#webtoasteventdetail) in `event.detail` · `message`, `state`

Signature and example

```ts
import type { WebToast, WebToastEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Toast1Show(
    sender: WebToast,
    event: CustomEvent<WebToastEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { message, state } = event.detail;
    console.log(message, state);
  }
}
```

### OnClose

[WebToastEventDetail](https://webrad.atentor.com/docs/types#webtoasteventdetail) in `event.detail` · `message`, `state`

Signature and example

```ts
import type { WebToast, WebToastEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Toast1Close(
    sender: WebToast,
    event: CustomEvent<WebToastEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { message, state } = event.detail;
    console.log(message, state);
  }
}
```