ExperimentalmoleculeOverlays

Bottom sheet

A panel that slides up from the bottom of a phone: where pickers and filters open below 768px.

import { … } from "@brdgapp/ui/components/bottom-sheet"

Usage

BottomSheet is a panel that slides up from the bottom of a phone screen, near the thumb. It's where filters, pickers and long menus open below 768px. It names the choice, its rows are 44px, and a choice closes it. FilterPill and ColumnFilterMenu use it by themselves; use it directly only for a new picker.

When to use

A picker or filter on a phone, below 768px. Above that, the same choices open as a menu.
A long list people scroll or search on a phone.

When not to use

For a short list of actions (Edit, Share, Remove). Keep the menu. Use ActionMenu instead.
For one item's details. Use Drawer instead.
For a question that needs an answer. Use ConfirmDialog instead.
On a laptop or desktop. Pickers there are menus.

Anatomy

Sort by

Handle. A 40 × 4px grey bar at the top: this panel came up, and goes back down.
Title. 16px bold: what's being chosen, like “Degree” or “Sort by”.
Options. 44px rows, 14px text, a blue tick on the chosen one. The list scrolls inside.
Panel. Up to 85% of the screen tall, 16px corners on top, room for the iPhone home bar under the last row.

Examples

A sort picker

Open it: the choices slide up from the bottom; picking one closes the sheet.

States

State	What happens
Opening	Slides up in 300ms over a dimmed page. With reduced motion it appears at once.
Open	Focus moves into the sheet.
Closing	A choice, Escape or a tap on the dimmed page closes it; focus returns to the button that opened it.

Behavior

Built on Base UI Dialog, so focus stays inside while it's open.
Its options are a radio group: screen readers hear the title and which one is chosen.
Use useIsMobile() to switch a picker between a menu and a sheet, as FilterPill does.

Do and don't

Name the choice in the title: “Degree”.

Don't

Title it “Select” or “Options”.

Close it when a single choice is made.

Don't

Add a Done button to a single choice.

Content

The title is the name of what's being chosen, in sentence case. Options are short labels, as in the menu.

Accessibility

A dialog named by its title; options are radios in a group, the chosen one announced.
Rows are 44px, the phone tap size.

Keys	Action
`Tab`	Moves between the options.
`EnterSpace`	Chooses the focused option and closes the sheet.
`Escape`	Closes the sheet.

API reference

BottomSheet

The panel.

Prop	Type	Default	Description
`open`	`boolean`	—	Whether it's showing.
`onClose`	`() => void`	—	Called on Escape, a tap outside, or after a choice.
`title`	`ReactNode`	—	What's being chosen.
`children`	`ReactNode`	—	The options, in a `role="radiogroup"`.

BottomSheetOption

One 44px option row.

Prop	Type	Default	Description
`selected`	`boolean`	—	The chosen one: bold, with a tick.
`onSelect`	`() => void`	—	Called when it's tapped.

Lineage

What it's built from and where it's used, read from the code. When you change it, check these too.

Built from: Nothing else in the package
Used by components: FilterPill
Used in patterns: None
Used in templates: None