Sheet

A modal sheet presents choices related to an action the user initiated, while keeping the context of the current view.

It has the purpose of requesting a specific decision or action from the user or enabling a simple task that they can complete before returning to the parent view.

A sheet appears from the bottom and is layered on top of other UI elements.
Optionally, the underlying view may be dimmed with a semi-transparent fill.

Sheets are using the full available width on phones, and are constrained to the default content width on tablet devices.

A sheet can always be dismissed by tapping outside the sheet, on the dimmed part of the screen.

Action Sheet

This type of sheet is used to present a set of choices, that don’t require additional information.

• If more context is needed for the available actions, a title and/or a description can be added to the top of the sheet.
• The last element of an action sheet is a Cancel button that allows the user to dismiss it without selecting one of the presented choices.
• Don’t add more than one destructive action (an action that either aborts a flow or permanently deletes something) to a sheet.

Example Android

Open in Figma

Tokens

Example iOS

Open in Figma

Tokens

Text & Color styles are thus derived from iOS defaults and not based on GDS definitions

Bottom Sheet

This bottom sheet component offers a content slot that can be filled with any set of components or unique layouts, for example illustrations or animations.

• A title is mandatory for this bottom sheet

• The x-button will always be shown and allows the user to dismiss the bottom sheet any time.

• An optional DragHandle can be added at the top to indicate that the bottom sheet is expandable. This should be used in case larger content, like infinite lists are expected. The bottom sheet will open with an initial height and expand and collapse once the user taps or drags the marker.

• The content slot can be filled with any content but should follow the rules listed below

• Use an Icon from our library in XL size or a custom illustration or animation.

• Add an optional description, but always keep it as short as possible - a sheet action should be quick & easy to understand.

• Use a primary button to render the main action.

• Use a tertiary button for any additional action the user can choose.

Sizes

On iOS, the size of a custom sheet is constrained to either use half of the available screen height, or the full screen height. If the full screen is used, the same visual appearance as in a normal Modal presentation is used (views appear stacked, with the origin view being rendered spatially behind the active view).

On Android, the height of a custom sheet is always derived from the content it shows. If a DragHandle is used, the bottomSheet will first be presented with a partially expanded height. Once the user scrolls or drags the handle the bottomSheet will expand to full height.

Example

Open in Figma

Bottom Sheet with Cells

If the simple action sheet is not enough to describe the choices, use the complex sheet instead, which renders each choice as a Cell.

• Each Cell has a leading icon to visually describe the action
• Each Cell can have an optional subline to offer additional information
• Like with the Action Sheet, a Title and/or a Description can be added to the top of the sheet.
• iOS only: The last element of an action sheet is a Cancel button that allows the user to dismiss it without selecting one of the presented choices.

Example iOS

Open in Figma

Example Android

Open in Figma