Skip to main content

Components

Bottom Sheet

Bottom sheet is a slides up from bottom of screen to reveal additional content or actions.

banner-Bottom Sheet

Anatomy

A bottom sheet component in a mobile app or website typically consists of a sheet of content that slides up from the bottom of the screen, covering a portion of the underlying content. The bottom sheet can be opened and closed by the user, and can contain a variety of elements such as text, images, buttons, and forms. It is often used to display additional information or options related to the main content, and can be implemented as a separate modal or as a part of the main layout.

bottom sheet anatomy guideline

  1. Header : with a title or controls

  2. Body : displaying the main content

  3. Footer : with additional controls

  4. Overlay : Optionally, a semi-transparent scrim / layer to dim the background

  5. Handle : Optionally, a gesture or button to swipe and close the sheet

Usage

Bottom sheets are commonly used in mobile apps and websites as a way to present additional information or options to the user. They can be used for a variety of tasks, including:

  1. Displaying additional information: Bottom sheets can be used to display additional information that is related to the main content of the app or website. For example, they can be used to show detailed information about a particular item in a list, or to provide more information about a specific feature or option.

  2. Providing access to options or settings: Bottom sheets can be used to provide access to options or settings that are related to the main content of the app or website. For example, they can be used to allow users to adjust the settings for a specific feature or to change the layout of the app.

  3. Collecting feedback: Bottom sheets can be used to collect feedback from users. For example, they can be used to display a form that users can fill out to provide feedback about the app or website.

  4. Showing navigation menu: Bottom sheets can be used to display navigation menu that can be easily accessible from anywhere in the app or website.

  5. Showing notifications : Bottom sheet can also be used to show notifications, alerts or any kind of message that requires user attention

When to use

  • To provide additional information or options related to the main content of the app or website, but don't want to take up too much screen real estate.
  • To allow users to access options or settings that are related to the main content of the app or website in a convenient and easy-to-use way.
  • To collect feedback from users about the app or website.
  • To show navigation menu that can be easily accessible from anywhere in the app or website.
  • To show notifications, alerts or any kind of message that requires user attention
  • To make use of the space in the bottom of the screen which is not being used effectively
  • To make use of the space without blocking the main content of the app or website

When not to use

  • The information or options can be easily presented within the main content of the app or website without taking up too much screen real estate.
  • Users don't need to access the options or settings frequently.
  • The app or website is designed for a small screen and the bottom sheet will take too much space and make it difficult to navigate.
  • The main focus of the app or website is on displaying the content and additional information or options can be distracting.
  • The bottom sheet will cover important information or call to action that should be always visible to the user.
  • The bottom sheet will not be used frequently enough to justify the additional development time and effort required to implement it.
  • The app or website is targeting an older audience that may have difficulty interacting with the bottom sheet.

Accessibility

Accessibility is an important consideration when designing bottom sheets. Here are some ways to make bottom sheets more accessible:

  1. Provide clear labels: The bottom sheet should have a clear label or title that describes the content or purpose of the sheet. This can help users understand what the sheet is for and what information it contains.

  2. Use appropriate contrast: The text and other elements in the bottom sheet should have a high contrast ratio with the background, making it easy for users with low vision to read the content.

  3. Make sure it’s keyboard accessible: Bottom sheets should be accessible using a keyboard, so users can navigate through the content and interact with the elements using only a keyboard.

  4. Use ARIA roles: Using appropriate ARIA roles can help users using assistive technology understand the purpose of the bottom sheet and the content inside.

  5. Provide a way to dismiss: The bottom sheet should provide a way for users to dismiss it easily, such as a close button or a key command.

  6. Avoid using bottom sheet for critical information: It’s important to avoid using bottom sheets for critical information or functionality that should always be visible and accessible to the user.

  7. Provide alternative: It’s also important to provide alternative ways to access the same information or functionality, in case user can not use the bottom sheet due to accessibility reason.

Overall, bottom sheets can be an effective way to provide additional information or options to users, but it’s important to consider accessibility when designing them to ensure that all users can access and benefit from the information or functionality provided.

Alt text

Do

Use a visible scrim with bottom sheets to inform users they cannot interact with the rest of the screen.

Alt text

Don't

Don’t use an invisible scrim for bottom sheets. This can mislead users about their ability to interact with the rest of the screen.

Content

When creating Bottom Sheet :

  1. Keep it relevant: The content in the bottom sheet should be relevant to the task or information the user is currently viewing or interacting with.

  2. Keep it brief: Bottom sheets are typically used to present supplementary information, so the content should be brief and to the point.

  3. Use clear and consistent formatting: The content should be easy to read and understand, with a clear hierarchy of information and consistent formatting.

  4. Use visual aids: Including images, icons, and other visual aids can help to break up the text and make the content more engaging.

  5. Make it actionable: Bottom sheets are often used to present options or actions, so make sure the content includes clear calls to action.

  6. Use white space: Keep the sheet minimalistic by using white space to separate content and make it more legible.

  7. Test with users: It’s always a good idea to test your bottom sheet content with users to see how it performs in a real-world context and make adjustments as necessary.