Skip to main content

​
Options

The Bottom Sheet supports an optional subheader, an optional close button, and any content composed from Carto components.

​
Subheader

An optional subheader renders a secondary line beneath the title — useful for a short status or timestamp. Omit it for a title-only header, as in the hero example above.

​
Close Button

The header close button is shown by default. Set showCloseButton={false} to hide it — the sheet remains dismissable via the drag handle, the backdrop, and Escape.

​
Content

content accepts any ReactNode, so compose Carto components — Checkbox, ArtifactCard, ActionLog, and so on — to build the sheet’s body.

​
Behavior

The Bottom Sheet negotiates its own height from content and viewport, and its body scrolls independently of the pinned header.

​
Sizing and Resizing

The sheet has a single, self-negotiated size rather than discrete size options. It opens at a start height that hugs its content up to 50% of the viewport, and the drag handle — draggable by pointer, or by Arrow Up / Arrow Down / Home / End when focused — resizes it between that start height and a 90% viewport ceiling. Dragging or pressing Arrow Down below the start height closes the sheet.

​
Scrolling Body

When content exceeds the current detent, the body scrolls independently while the header and drag handle stay pinned. A scroll shadow appears once the body has scrolled.

​
Keyboard Interaction

Users can navigate, resize, and dismiss the Bottom Sheet using standard keyboard controls.
Last modified on July 24, 2026