Bottom sheet

---

---

Anatomy

The Bottom Sheet is structured into four primary areas: Grabber, Header, Content, and Footer. Each area has a defined purpose and behavioral role within the component.

1. Grabber: (Optional) Small horizontal visual indicator that reinforces the swipe-down interaction pattern.
2. Header: Top structural area of the sheet, located directly below the grabber. It contains:
1. Title: (Optional) Text displayed in the header area that describes the context and purpose of the sheet.
2. Close Button: Button positioned at the top-right corner of the sheet header for dismissing it.
3. Content: The primary flexible container of the Bottom Sheet. It contains:
1. Content slot: The main content area that displays information, forms, or other interactive elements.
2. Scrollbar: (Optional) It indicates internal scroll activation and is contained within the content area.
4. Footer: (Optional) The bottom section that contains action buttons and additional elements like texts.

---

Usage Guidelines

Bottom Sheets are designed to present contextual, task-oriented content that complements the current screen without disrupting the overall navigation flow.
They allow users to complete actions while preserving context and spatial orientation. Because they are modal, they temporarily block background interaction until dismissed.

When to use this component

Use Bottom Sheets to present supplementary content or actions that are related to the current context, without navigating away from the screen.

They are ideal when the user needs to:

• Select multiple options like filters, multi-select lists, grouped options.
• Complete lightweight forms that do not require deep navigation or full task immersion.
• Perform contextual actions directly related to the current content (e.g., sort, share, apply filters).
• Display structured scrollable lists with optional actions.
• Run short multi-step flows like stepped interactions that remain within a single contextual page.

When not to use this component

Avoid using Bottom Sheets in the following scenarios:

• Complex multi-screen workflows. If a flow requires navigation between multiple screens or deep hierarchical levels, use a Full Screen Modal or a new page instead.
• Critical system alerts. For destructive confirmations or blocking alerts, use an Alert Dialog.
• Nested overlays. Do not open a Bottom Sheet from inside another Bottom Sheet.
• Persistent side-by-side interactions. If content needs to remain partially visible and interactive (e.g., map interactions), this is out of scope for the current version.

---

Best Practices

---

General Component Behaviors

Bottom sheets create a focused interaction layer that temporarily takes precedence over the main page content. When activated, the sheet captures user attention through visual prominence and interaction constraints.

• The Bottom sheet automatically manages focus by moving screen readers navigation to the content elements and trapping focus within its boundaries.
• Users cannot interact with background content while the Bottom sheet is active.
• Background content becomes visually subdued through an overlay effect, creating clear visual separation between the sheet and underlying page elements.

Width

The bottom sheet is an element designed to fill the entire width of the screen, so as not to lose space for interactions that may come up on it.

Content height

Height is adaptive and driven by content until a defined maximum threshold is reached. The sheet grows with its content until reaching the OS defined “safe area”.

After that:

• Sheet stops expanding
• Internal scroll activates in content area
• Footer will always be sticky at the bottom of the page

Opening and closing Bottom sheets

Opening:

• Always triggered by explicit action
• No automatic open on mount

Closing:

• Tap backdrop: By tapping the backdrop the bottomsheet closes
• Swipe down gestures: Always allowed and can be handled by the grabber, header or content when there’s no scroll. In case the content has scroll, it must be offset = 0.
• Close button: Located in the header and always mandatory to support users who are unfamiliar with gestures and screen readers for having a clear focus.
• Footer actions: Footer can contain actions like “Close” or “Dismiss” that would close the Bottomsheet. When finishing some flows, there could be actions like “Apply [sth]”, “Submit [sth]” or “Save [sth]”, that would directly close the Bottomsheet:

Texts truncation

The texts on the bottomsheets need to be accurate, so the following criteria have been defined:

Title in header:

Always center-aligned. It can have a maximum of 2 lines, and the text will be truncated with ellipsis when it reaches the limit.

Footer additional information:

• Title: Can be left or center aligned. It can have a maximum of 1 line, and the text will be truncated with ellipsis when it reaches the limit.
• Caption: Can be left or center aligned. It can have a maximum of 2 lines, and the text will be truncated with ellipsis when it reaches the limit.

---

Footer layout variants

Primary action only

Plain action only

Primary and plain actions

Texts and primary action

---

Content Guidelines

• Titles should be concise and descriptive, clearly communicating the modal's purpose in maximum 2 lines. Use sentence case and avoid unnecessary articles.
• Action button labels should use clear, action-oriented language that describes exactly what will happen when clicked. Primary actions use strong verbs, while secondary actions use neutral terms like "Cancel" or "Close".
• Body content should be scannable and focused, presenting only information directly relevant to the sheet's purpose. Avoid overwhelming users with excessive text or complex layouts.

For further information, see the Content Styleguide.

---

Known Gaps

The following are identified but out of scope for v1:

• Non-modal Bottom Sheet variant (e.g., map interaction scenarios)
• Snap points
• Deep navigation (two or more levels)
• Custom header configurations