Glowup
FEEDBACK · 64 / 89
BottomSheet
BottomSheet — a Material You feedback component for React Native and web.
packages/ui/src/components/BottomSheet.tsx
Live demo
360
720
Full
Open Bottom Sheet
Properties
4 controls
Visible
Title
Show Handle
Dismiss On Scrim Tap
Usage
BottomSheet.tsx
<
BottomSheet
visible
={
false
}
title
=
"Sheet Title"
/>
Variants
The states and shapes this component is meant to be used in.
Filter sheet
Components
34 results
Filter components
Action sheet
Chip
Buttons & actions
More actions
No handle
Without the drag handle the sheet is dismissed by its own actions.
Sort by
Release notes
maxHeightRatio caps the sheet at half the window.
Release notes 0.1.0
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
7 on BottomSheetProps
children
required
React.ReactNode
onDismiss
required
() => void
visible
required
boolean
dismissOnScrimTap
boolean
default: true
maxHeightRatio
number
default: 0.85
Max sheet height as a fraction of the window height.
showHandle
boolean
default: true
title
string
Previous
Popover
Next
SideSheet