Show Bottom Sheet
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
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:
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:
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
Add the action to a widget event (e.g., button tap, menu selection)
Choose Show Bottom Sheet from the action list
Set
componentfrom dropdown and fill their respective argsOptionally 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:
Common Result Patterns:
Form submission data
Selected option/item
Confirmation responses
User input values
🔗 Related Documentation
Finding Page/Component Slugs - How to locate and copy component slugs for bottom sheets
Open Dialog - Display components as modal dialogs instead of bottom sheets
Last updated