# Toast

{% embed url="<https://youtu.be/zl7ZAsgPghQ?si=DSyhfVTjWoNpKog->" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=zl7ZAsgPghQ>

The **Show Toast** action displays a temporary, customizable notification message to provide user feedback. Toasts appear as floating overlays that automatically disappear after a specified duration, making them ideal for non-intrusive confirmations, alerts, or status updates.

<figure><img src="/files/UFnkWqdGcwpozyAO08JW" alt="Call External Method action configuration showing message name and payload fields"><figcaption><p>Toast Action</p></figcaption></figure>

***

#### ✅ Common Use Cases

* Showing success messages after form submissions
* Confirming actions like "Item saved" or "Copied to clipboard"
* Displaying error messages or warnings
* Providing feedback after API calls or data operations
* Alerting users about background processes

***

#### ⚙️ Default Behavior

By default:

| Behavior        | Description                                              |
| --------------- | -------------------------------------------------------- |
| **Duration**    | Toast displays for 2 seconds before auto-dismissing      |
| **Position**    | Appears at the bottom center of the screen               |
| **Appearance**  | Black background with white text, rounded corners        |
| **Size**        | Auto-sized based on content (customizable)               |
| **Interaction** | Non-interactive - cannot be tapped or dismissed manually |

***

#### 🛠️ How to Use

1. Add the action to a widget event (e.g., button tap, form submission)
2. Choose **Show Toast** from the action list
3. Set the `message` text to display
4. Optionally customize `duration` and `style` properties

***

#### 📦 Properties

| Property   | Type                | Required | Description                              |
| ---------- | ------------------- | -------- | ---------------------------------------- |
| `message`  | Expression (String) | ✅        | The text content to display in the toast |
| `duration` | Expression (Number) | ❌        | Display duration in seconds (default: 2) |
| `style`    | Object              | ❌        | Visual styling configuration             |

***

#### 🎨 Style Configuration

The `style` object supports extensive customization:

| Style Property | Type   | Description                                                                                                                                                                              | Default         |
| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
| `bgColor`      | String | Background color (hex code or color name)                                                                                                                                                | `"#000000"`     |
| `borderRadius` | String | Corner radius (comma-separated: `topLeft,topRight,bottomRight,bottomLeft`)                                                                                                               | `"12,12,12,12"` |
| `height`       | Number | Toast height in pixels                                                                                                                                                                   | Auto-sized      |
| `width`        | Number | Toast width in pixels                                                                                                                                                                    | Auto-sized      |
| `padding`      | String | Inner spacing (comma-separated: `left,top,right,bottom`)                                                                                                                                 | `"24,12,24,12"` |
| `margin`       | String | Outer spacing (same format as padding)                                                                                                                                                   | None            |
| `alignment`    | String | alignment within toast                                                                                                                                                                   | `"center"`      |
| `textStyle`    | Object | Text styling (see [Text Style Properties](https://github.com/Digia-Technology-Private-Limited/digiaDocs/blob/main/docs/building-ui/widgets/basic-widgets/text.md#text-style-properties)) | White text      |

***

#### 💡 Examples

**Basic Success Message:**

```javascript
// message: "Data saved successfully!"
// duration: 2
// style: {}
```

**Error Toast with Custom Styling:**

```javascript
// message: "Failed to save data. Please try again."
// duration: 3
// style: {
//   "bgColor": "#dc3545",
//   "borderRadius": "8,8,8,8",
//   "textStyle": {
//     "color": "#ffffff",
//     "fontSize": 14,
//     "fontWeight": "500"
//   }
// }
```

**Dynamic Message from State:**

```javascript
// message: appState.lastActionMessage
// duration: 2
```

**API Response Feedback:**

```javascript
// message: if(isNull(jsonGet(response.body, 'message')), 'Operation completed', jsonGet(response.body, 'message'))
// duration: 2
```

**Custom Styled Confirmation:**

```javascript
// message: "Welcome back!"
// style: {
//   "bgColor": "#28a745",
//   "borderRadius": "20,20,20,20",
//   "padding": "32,16,32,16",
//   "textStyle": {
//     "fontSize": 16,
//     "fontWeight": "600"
//   }
// }
```

{% embed url="<https://digiaacademy.portal.trainn.co/share/toast-examples>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/logic-and-interaction/actions/toast.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.