Overlays

Sheet

Bottom-anchored modal panel built on the native dialog element with an optional drag handle for mobile-first sheet patterns.

import { Sheet } from '@lostgradient/cinder/sheet';
overlaydialog
01

Overview

Bottom-anchored overlay panel optimised for mobile-style drawer interactions.

Choosing this component

  • Action sheets and option pickers on mobile or touch-first layouts where a bottom-up slide feels natural.
  • Quick-select panels (share, sort, filter) that need to feel native on small screens.

Choosing something else

  • Desktop-first side panels — use Drawer for left/right edge placement.
  • Full-attention blocking dialogs — use Modal when the user must act before continuing.

Related components

  • Drawer — side-anchored overlay for desktop-first supplementary content.
  • Modal — blocking full-attention overlay.

Usage

svelte 
<script lang="ts">
  import Sheet from '@lostgradient/cinder/sheet';
</script>

<Sheet />
Live preview
02

When to use

Use when
  • Presenting a focused task or set of actions that slides up from the bottom of the viewport on touch surfaces.
  • Showing a contextual surface that should feel anchored to the screen edge rather than centered like a modal.
Avoid when
  • Interrupting the user with a centered task or confirmation — use modal instead.
  • Showing supplementary side navigation or filters — use drawer or popover.
03

Examples

Overflowing sheet

A bottom sheet with enough content to scroll.

04

Props

Props for sheet
Name Type Default Required Bindable Description
open boolean false bind Whether the sheet is open. Bindable via bind:open.
title text req Accessible name for the sheet. Required for screen-reader labelling. Rendered as a visible <h2> in the default header. When a custom header snippet is provided without ariaLabelledBy, this text is rendered in a visually-hidden <h2> as the accessible name fallback.
triggerRef HTMLElement | null null Optional reference to the element that opened the sheet. When supplied, focus returns to this element on close. When omitted, focus restores to the element that held focus before the sheet opened.
ariaLabelledBy text Optional id of an element that names the sheet. When supplied, sheet wires aria-labelledby to this id and renders no internal heading. Use this when a custom header snippet has its own visible heading — supply ariaLabelledBy pointing to that heading's id so the visible and accessible names stay in sync.
dragHandleVisible boolean false When true, render a decorative drag handle above the header. Swipe-to-close gesture is a stretch goal not implemented in MVP — the handle is purely a visual affordance. Default false. Named dragHandleVisible (not draggable) to avoid colliding with the native HTML draggable attribute on the underlying <dialog>.
header snippet Custom header. Falls back to a default header that renders title.
children snippet req Sheet body content. Required.
footer snippet Optional footer (e.g. action buttons).