Bottom Sheet

The Bottom Sheet can be used to open panels to the bottom of the screen. These panels are intended primarily as an interaction on mobile devices where they can be used as an alternative to dialogs and menus.

Overview / Hero - KL

Anatomy

The Bottom Sheet consists of three main parts: a fixed header at the top, the content area where information or actions are displayed, and an optional fixed footer at the bottom. The footer can include interactive elements like buttons or a text field, depending on the use case.

Anatomy Bottom Sheet

Anatomy Bottom Sheet

#

Element type

Element name

Element description

1

Header

Fixed Header

The top section that remains fixed and can contain titles or actions.

2

Content Area

Content

The main section where the content is displayed, such as text or forms.

3

Footer

Fixed Footer

The bottom section, fixed in place, which can contain interactive elements like buttons or a text field.

Size

The Bottom Sheet has a maximum height of 430 px for both variants. Its height adjusts dynamically based on the content but will never exceed 430 px. This ensures the closing mechanism remains accessible.

Max height Bottom Sheet

Max height Bottom Sheet

Fluid height Bottom Sheet

Fluid height Bottom Sheet