vocab.design

component · touch

Bottom sheet

also called sheet (shadcn), half sheet (hig), modal sheet (community)

A surface anchored to the bottom edge that slides up over the content, often draggable between a peeked and an expanded height.

A bottom sheet is a panel that comes up from the edge nearest the thumb. That is its whole argument: on a phone the bottom of the screen is the only part of the layout a hand can reach without regripping, so the surface that holds an alternative, a form, or the details of the thing you just tapped arrives there rather than in the middle.

The heights it is allowed to rest at are called detents, and most sheets have two or three: a peek that shows a title and a line, a half that shows the useful part, and a full that takes the screen. A sheet with detents earns a grabber, the short rounded bar that says the surface can be dragged between them, and dragging is how a reader moves between them without hunting for a control. A sheet with one fixed height has no business drawing that bar.

Modal or not is the second decision, and it is independent of the first. A modal sheet lays a scrim over the content behind it and has to be dealt with; a non-modal one lets the page keep working underneath, which is what makes a map application’s list of nearby places a sheet rather than a dialog. Either way the dismissal has to be honest: a swipe down, an Escape, and a press on the scrim should all land, and a sheet that can only be closed by one of the three will be fought with.

The names run together in practice. Material calls it a bottom sheet, Apple’s sheets carry detents and the half one has its own name, and shadcn’s Sheet is a generic edge panel of which the bottom one is a variant. The neighbouring word is drawer, which arrives from the side and can stay open beside the content; if the surface docks to the bottom and stacks over what it covers, sheet is the more precise word.

Which word?

If you wantsay
a panel that rises from the bottom edgebottom sheet
choices for an action you just started, on a phoneaction sheet
a panel that slides in from an edge and can stay opendrawer
a window that blocks the page until it is dealt withmodal dialog
a full height modal for a creation flowtearsheet

Related

See also: Grabber · Modal presentation

Implementations

Specimens illustrate the concept; for production use, start here.

materialBottom sheets
shadcnSheet

Sources