# 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="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-1ec8ce94714346c144300576fae5ebf48e2c2789%2Ftoast2.gif?alt=media" 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>" %}