Glowup
FEEDBACK · 65 / 89
SideSheet
SideSheet — a Material You feedback component for React Native and web.
󱀫
packages/ui/src/components/SideSheet.tsx
Live demo
Properties
3 controls
Title
Modal
Side
End
󰍝
Usage
SideSheet.tsx
<SideSheet title="Filters" />
Variants
The states and shapes this component is meant to be used in.
Modal
Standard

Details

Filters, details or a secondary form, beside the main content.
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
12 on SideSheetProps
Filter props
󰍉
children
required
React.ReactNode
onDismiss
required
() => void
Called by the close button, and in modal mode by the scrim, Android back and Escape.
actions
React.ReactNode
A row of buttons at the bottom, below a divider.
modal
boolean
default: true
`true` slides over the content with a scrim; `false` is a standard sheet you place in a row beside the content. Defaults to `true`.
onBack
() => void
Shows a back button before the title — for a sheet with sub-pages.
showCloseButton
boolean
default: true
Defaults to `true`.
side
"start" | "end"
default: "end"
The edge it attaches to, in reading direction. Defaults to `"end"`.
style
StyleProp<ViewStyle>
testID
string
title
string
visible
boolean
default: false
Modal only: whether the sheet is open.
width
number
default: SHEET_WIDTH
Defaults to 360, capped at the window width.