BottomSheet

A panel that slides up over the screen for a short task or a set of choices.

When to use it

• Touch clients only: React Native and Compose.
• It floats: a margin separates it from the screen edges, and all four corners are rounded.
• It closes on a tap outside, a drag down, or the back button.

Example

import { BottomSheet, Button } from "@acme/ui-native";

<BottomSheet open={open} onClose={() => setOpen(false)} title="Share report">
  <Button variant="primary" label="Copy link" onPress={copy} fullWidth />
</BottomSheet>

Options

The React Native component’s props. Compose takes the same options under its own naming conventions.

Prop	Type	Notes
open	boolean	Required.
onClose	() => void	Required. Called when the person dismisses the sheet.
title	string
closeLabel	string	What a screen reader says for the area outside the sheet. Defaults to Close.

Source

Platform	File
React Native	packages/ui-native/src/BottomSheet.tsx
Compose Multiplatform	kotlin/ui/src/commonMain/kotlin/acme/ui/BottomSheet.kt