# Show Bottom Sheet

{% embed url="<https://youtu.be/s5IAyTdhG_U?si=fN-9GHzd5hHMWQ8w>" %}

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

The **Show Bottom Sheet** action allows you to display a component as a bottom sheet over your current page. It supports customization of appearance and optional result handling.

***

#### 📦 Properties

| Property                 | Type               | Required | Description                                                            |
| ------------------------ | ------------------ | -------- | ---------------------------------------------------------------------- |
| `component and its args` | Dropdown and value | ✅        | Add Component from dropdown and fill their respective component params |
| `Expect Result`          | Boolean            | ❌        | Boolean for trigger `onResult` or not                                  |
| `style`                  | Object             | ❌        | Visual styling configuration                                           |
| `onResult`               | Action Flow        | ❌        | Actions to run when result is returned                                 |

***

#### 🎨 Style Configuration

The `style` object supports comprehensive customization:

| Style Property | Type    | Description                            | Default                |
| -------------- | ------- | -------------------------------------- | ---------------------- |
| `bgColor`      | String  | Background color (hex or color name)   | Transparent            |
| `barrierColor` | String  | Background overlay color               | Semi-transparent black |
| `maxHeight`    | Number  | Maximum height ratio (0.0-1.0)         | 1.0 (full height)      |
| `useSafeArea`  | Boolean | Respect device safe areas              | `true`                 |
| `borderStyle`  | String  | Border style (`solid`, `dashed`, etc.) | None                   |
| `borderColor`  | String  | Border color                           | None                   |
| `borderWidth`  | Number  | Border width in pixels                 | None                   |
| `borderRadius` | String  | Corner radius (comma-separated)        | None                   |
| `strokeAlign`  | String  | Border alignment                       | `center`               |
| `icon`         | Object  | Close/dismiss icon configuration       | None                   |

***

#### ✅ Common Use Cases

* Displaying filter options or search criteria
* Showing quick actions or context menus
* Collecting short form inputs or confirmations
* Presenting settings or configuration options
* Displaying media picker or selection interfaces

***

#### ⚙️ Default Behavior

By default:

| Behavior            | Description                                          |
| ------------------- | ---------------------------------------------------- |
| **Modal Behavior**  | Blocks interaction with underlying content           |
| **Dismissal**       | Closes when tapped outside or via internal actions   |
| **Safe Area**       | Respects device safe areas by default                |
| **Result Handling** | No result returned unless `Expect Result` is enabled |
| **Animation**       | Smooth slide-up/slide-down transitions               |

***

#### 🛠️ How to Use

<figure><img src="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-cd32162d4b71f504ab89c8e32caf580e00f196cb%2Fshow_bottom_sheet_action.png?alt=media" alt="Copy Slugs"><figcaption><p>Copy Slug</p></figcaption></figure>

1. Add the action to a widget event (e.g., button tap, menu selection)
2. Choose **Show Bottom Sheet** from the action list
3. Set `component` from dropdown and fill their respective args
4. Optionally configure styling and result handling

***

#### 📤 Result Handling

When `Expect Result` is enabled, the bottom sheet can return data that triggers the `onResult` action flow. The result is available as a `result` variable:

<figure><img src="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-687c61590ba1f6f53583ea3c78b6d62dbe1aaf7c%2Fshow_bottom_sheet_on_result_action.png?alt=media" alt="Copy Slugs"><figcaption><p>Copy Slug</p></figcaption></figure>

**Common Result Patterns:**

* Form submission data
* Selected option/item
* Confirmation responses
* User input values

***

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

***

#### 🔗 Related Documentation

* [Finding Page/Component Slugs](https://github.com/Digia-Technology-Private-Limited/digiaDocs/blob/main/platform-overview/builder-tool/finding-slugs.md) - How to locate and copy component slugs for bottom sheets
* [Open Dialog](https://docs.digia.tech/logic-and-interaction/actions/open-dialog) - Display components as modal dialogs instead of bottom sheets

***