Bottom Sheet
The Bottom Sheet element is a slide-up panel that appears from the bottom of the screen when triggered by a button click. It references another page for its content, allowing you to build rich overlay experiences.
Overview
Bottom Sheet provides a modal-like panel that slides up from the bottom edge. It is commonly used on mobile-style interfaces but works on both web and mobile platforms.
Common uses:
- Action menus and option pickers
- Detail views triggered from a list
- Quick-edit forms
- Confirmation dialogs with rich content
Adding a Bottom Sheet
- Open the Website Builder
- Find Bottom Sheet in the Elements panel (under Tools)
- Drag it onto your page
- Configure its properties in the General Tab
Note: This element works on both web and mobile applications.
Properties
General Tab
Content
| Property | Description |
|---|---|
| Source Page | The page whose content is rendered inside the bottom sheet |
Trigger
| Property | Description | Default |
|---|---|---|
| Trigger Button Label | Text displayed on the trigger button | "Open" |
| Auto-Open | Open the bottom sheet automatically when the page loads | Off |
Appearance
| Property | Description | Default |
|---|---|---|
| Height | Maximum height of the sheet (percentage of screen) | 50% |
| Show Handle | Display a drag handle bar at the top of the sheet | On |
| Show Backdrop | Display a semi-transparent backdrop behind the sheet | On |
| Backdrop Closes | Tapping the backdrop closes the sheet | On |
Color Tab
| Property | Description | Default |
|---|---|---|
| Background Color | Sheet background | #ffffff |
| Handle Color | Drag handle bar color | #cccccc |
| Backdrop Color | Backdrop overlay color | rgba(0,0,0,0.5) |
Dimensions Tab
| Property | Description |
|---|---|
| Width | Element width (trigger button area) |
| Padding | Inner spacing of the sheet content |
| Border Radius | Corner rounding on the top edges of the sheet |
Best Practices
Keep content concise - Bottom sheets work best for focused, short interactions
Always show a handle - The handle gives users a visual cue that the panel is draggable or dismissible
Use backdrop for focus - The backdrop prevents interaction with the page behind and signals a modal context
Avoid auto-open on every visit - Reserve auto-open for one-time prompts or onboarding flows
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.
Useful Links:
Web Elements - https://help.acenji.com/#/./create-web-application/elements/index