# 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="/files/L9cpFzF7vpFtuLJFM68A" 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="/files/90c684Uk1NNOpcxHVKrd" 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](/logic-and-interaction/actions/open-dialog.md) - Display components as modal dialogs instead of bottom sheets

***


---

# 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/show-bottom-sheet.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.