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. SetshowCloseButton={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.Usage Guidelines
When to Use
Use the Bottom Sheet when:- Secondary content – Supporting content needs a modal panel that rises from the bottom of the screen.
- Forms, lists, and composed layouts – The body combines Carto components, such as Checkbox, Artifact Card, or Action Log.
- Content that varies in height – The sheet opens at the height of its content, up to half the viewport, and users drag it taller to see more.
When not to use
Avoid using the Bottom Sheet for:- Short confirmations and acknowledgements – Use a Dialog for message-style content, such as a confirm and cancel decision or an acknowledge-only message.