Modal Bottom Sheet

The Bottom Sheet Plugin should be used when multiple actions are needed for a single cell style. This could include Download, favorite & Share. The Bottom Sheet Plugin allows for these actions to be displayed when actioned via the ‘Open Modal Bottom Sheet Cell Action’ plugin.

Anatomy of Modal Bottom Sheet

  1. Overlay
  2. Optional Handle
  3. Toast Menu Padding Top (14px)
  4. Optional Close Button
  5. Title Label
  6. Summary Label
  7. Action button icon (44x44px)
  8. Toast item label
  9. Toast Menu Padding Bottom (8px)

Adding the Bottom Sheet plugin & Open Modal Bottom Sheet Cell Action to an app

The ‘Modal Bottom Sheet Action’ plugin is used to trigger & configure the bottom sheet from a cell. This should be added via the plugin gallery.

Modal Bottom Sheet in plugin Gallery

Actioning a download from the Bottom Sheet plugin

Action plugins have different states which can be amended via the flavors section in the action plugin itself. Please note that the action labels (such as ‘Download’ or ‘Favorited’) can be changed via the localizations section.

Modal Bottom Sheet button states

Customizing assets/styles of bottom sheet plugin

There are a number of configuration options available with the bottom sheet. However, they are spread across different plugins.

  • Action icons/labels are configured through the action plugins. This refers to Download, Favorite & Share
  • Base bottom sheet styles are configured in the Theme plugin. This includes: Overlay color, Bottom Sheet background color, Top Corner Radius, Handle Configuration, Max Height & Tablet Max Width
  • The rest of the configuration takes place in the Bottom Sheet plugin and contains the configuration options for menu ordering, spacing, title & subtitle styling and menu item styling.

Modal Bottom Sheet Variations

Adding/Reordering action on the Bottom Sheet

Actions that appear in the bottom sheet can be managed via the ‘Open Modal Bottom Sheet Cell Action’ plugin. In the screenshot below the list of actions are displayed in the ‘Modal Bottom Sheet Actions’ field. These should be comma separated. The order that the actions appear in the bottom sheet can be amended here by rearranging this comma separated list.

  • Download: offline-content-button
  • favorite: local_storage_favorites_action
  • Share: native_share_action

Modal Bottom Sheet configuration