Skip to main content

Bottom Sheet

A bottom sheet is a surface attached to the bottom of the screen that displays additional information or actions while keeping the main content visible.

Dos and don'ts

Do
  • Use bottom sheets when you need to display additional information, controls or functionalities related to the underlying content.
Don't
  • Don't use bottom sheets in wide screens (over 768px wide). Use a modal instead.

Anatomy

A bottom sheet anatomy.
  1. Header: Area where the title of the bottom sheet is displayed along with its control method.
  2. Content: Flexible area which can contain a wide range of contents and layouts.
  3. Footer (optional): Contains the different actions you can perform with this bottom sheet.
  4. Icon (optional): Visually highlights the nature of the contents in the bottom sheet.
  5. Title (optional): Sums up the contents of the bottom sheet in one category.
  6. Pull tab (optional): Allows the user to hide the bottom sheet.
  7. Slot (optional): Nested slot which can be replaced by custom content.
  8. Primary CTA (optional): Allows the user to perform an action.
  9. Secondary CTA (optional): Allows the user to perform an action.
  10. Image/Illustration (optional): Used to display an image or illustration as the head of the bottom sheet.
  11. Close button (optional): Allows the user to close the bottom sheet.

Variants

Variants are just indicative templates of the type of content a bottom sheet can hold. For custom bottom sheets check the 'Custom bottom sheets' section.

Default

This is the default variant of the Bottom Sheet, which features a Slot which can be replaced by a local component containing the Bottom Sheet's contents.

A default bottom sheet with a header, scrollable content slot, and footer containing two action buttons.

Modifiers

Variants are just indicative templates of the type of content a bottom sheet can hold. For custom bottom sheets check the 'Custom bottom sheets' section.

Don't detach the header and footer nested components. Make sure you don't detach the .bottom_sheet-header and .bottom_sheet-footer components, as these are nested components within the main Bottom Sheet component that need to be controlled globally. If you need to customise these, please get in touch with a member of the PIE Design System team.

General modifiers

The footer can be toggled off for instances where there isn't a need for button actions.

Two bottom sheets side by side: one with a footer containing action buttons, and one with the footer toggled off.

Header specific modifiers

Controls

Controls define how the user can interact with the bottom sheet itself. There are three control variants available: Close, Pull tab or None.

Close

The user can close the bottom sheet.

A bottom sheet header with a close button (×) displayed in the top-right corner.
Pull tab

The user can hide the bottom sheet.

A bottom sheet header with a pull tab handle displayed at the top centre, allowing the user to drag the sheet down to hide it.
None

The user can't close or hide the bottom sheet.

A bottom sheet header with no close button or pull tab, leaving the header area with only the title.

Contents

Indicates the type of content displayed in the header area. There are four variants:

Default

Text only header, which can include a title, an icon and a close/pull tab control.

A bottom sheet with a text-only header showing a title and a close button.
Image

This header variation can be used to display an image.

A bottom sheet with an image displayed in the header area at the top of the sheet.
Small illustration

This header variation can be used to display small illustrations only. They display at 120x120dp.

You can change the colour of the illustration background to any of our brand colours, or remove it entirely.
Use small illustrations only. If you need to use large illustrations, use the large illustration property instead.
A bottom sheet with a small 120×120dp illustration displayed in a coloured circular background in the header area.
Large illustration

This header variation can be used to display large illustrations only. They display at 180x180dp.

You can change the colour of the illustration background to any of our brand colours, or remove it entirely.
Use large illustrations only. If you need to use large illustrations, use the small illustration property instead.
A bottom sheet with a large 180×180dp illustration displayed prominently in the header area.
Empty

This instance will only show the selected control, removing any title, icon, image or illustration.

A bottom sheet with an empty header showing only the close button and no title, icon, or imagery.

Title

There are several modifiers which have an effect on the way the title is displayed:

Title

This instance only shows the title.

A bottom sheet header displaying a title text without any accompanying icon.
Title + Icon

This instance shows the title paired with an icon to provide more context and visual flair.

A bottom sheet header displaying a title text alongside a small icon to the left for additional visual context.
None

This modification hides the title. It should be used only when the title is not necessary.

A bottom sheet header with no title displayed, showing only the control element.

Bottom sheets will often include actions that can be performed by the user to resolve, dismiss or acknowledge the information presented in the bottom sheet. However, these actions should be kept to a minimum. We offer the following two variants:

Two actions

Use it when you need to offer both a primary and secondary action. Usually these represent the main action of the Bottom Sheet (e.g. 'Acknowledge') and an alternative action (e.g. 'Dismiss').

A bottom sheet footer containing two side-by-side buttons: a primary action button and a secondary action button.
One action

Use it when you only have one action within your Bottom Sheet.

A bottom sheet footer containing a single primary action button.
Full width buttons

Used for an alternative layout, mainly when button labels are too long.

A bottom sheet footer with two stacked full-width buttons, used when button labels are too long to fit side by side.

Fixed elements

Sometimes the content inside our Bottom Sheets will be longer than the space available in our viewport. In these instances content might have to be scrolled so it can be read entirely by the user. The following section outlines the behaviours of the Bottom Sheet's header and footer when there is an overflow of content.

Scrolled header

In Bottom Sheets where content needs to be scrolled, the header should lay on top of the scrolled content. To visually indicate this, an elevation token ($elevation-04) has been applied to the 'Scrolled' variant of this nested component.

A bottom sheet showing a fixed header with an elevation shadow applied as content scrolls beneath it.

Used when the content inside the bottom sheet is longer than the total height of the screen, but the actions that can be performed in the Bottom Sheet need to be visible at all times. To visually indicate this, an elevation token ($elevation-05) has been applied to the 'Fixed' variant of this nested component.

A bottom sheet showing a fixed footer with an elevation shadow, remaining visible while long content scrolls above it.

Content

  • A bottom sheet causes all content and UI elements behind it to display a scrim. Tapping the scrim dismisses both the bottom sheet and scrim from view.
  • The contents of the bottom sheet can be customised by using the Figma slot.
Find out more about using the slot in the Figma slot guide.

Overrides

A bottom sheet highlighting the actions buttons that are open for overrides.
  1. Buttons: The Button's size can be decreased, and their variant can be changed. But all changes must adhere to the button pair guidelines if they are kept as a pair, including the size of both buttons remaining consistent.

Overflow

To provide access to its top actions, the initial vertical position of bottom sheets should be capped at 50% of the screen height. Bottom sheets whose contents exceed 50% of the screen height can then be pulled up across the full screen, scrolling internally to access their remaining items.

Please note that the 50% sizing rule is just an orientation. If you think that the fact it takes 50% of the screen might be detrimental for the experience, you can set the size to an initial size which you think is appropriate.
A bottom sheet initially displayed at 50% of the screen height with content partially hidden below the fold.

Content from a bottom sheet that initially appears below the screen edge becomes visible when you drag the sheet into view.

A bottom sheet being dragged upward by the user, revealing more content as the sheet expands towards full screen.

Once the bottom sheet has been scrolled up and the header has reached the top of the screen, the header will become fixed to the top so that Bottom Sheets can continue to be closed comfortably.

A bottom sheet fully expanded to full screen height with the header fixed at the top and content scrolling internally.

RTL Example

Here are some examples of Bottom Sheet in RTL context:

A bottom sheet displayed in a right-to-left layout, with the close button and title mirrored accordingly.
Back to top