Skip to content
Rechaj Design

bottom sheet

Bottom sheet

Section titled “Bottom sheet”

Mobile-first sliding sheet that anchors to the bottom of the device. The default for nearly every transient mobile interaction at Rechaj.

See the canonical implementation in DESIGN.md §9.10 “Sheet Wrap” and §9.11 “Success / Confirmation Modal”.

Anatomy

Section titled “Anatomy”
  • .sheet-wrap — full-bleed dark backdrop that captures taps to dismiss
  • .sheet — the white surface, border-radius: 28px 28px 0 0, slides up
  • .sheet-pill — drag indicator at the very top
  • .sheet-head — title (.sh-title, semibold 600, 17px, tracking -0.2) + optional sub (.sh-sub, 12px, muted) + close button
  • Body — content varies by use case (list picker, search, action menu, success illustration)

Hard rules

Section titled “Hard rules”
  • Always use a bottom sheet, never a centered alert, for the cases above.
  • Drag pill is mandatory.
  • Close button (X) is top-right when there is no destructive primary action.
  • Slide-up animation: 240ms cubic-bezier(.2,.8,.2,1). No bounce except for the success modal (popBounce).

Variants

Section titled “Variants”
  • List picker — combine with list-picker.md
  • Search — .sheet-search input + .sheet-results list
  • Action menu — .sh-actions-list rows
  • Success — .success-illustration (brand-tinted check), .success-title, .success-desc, optional .success-id-pill
  • Photo preview — sheet head with filename + size, body is .mv-photo