Bottom Sheet

Angular Material Bottom Sheet slides a panel up from the bottom edge of the screen over a dimmed backdrop, and closes again when the backdrop is clicked or the panel is swiped away. It is a natural home for a list of actions, a short message or a handful of options that belong to the current view, especially on small screens. BuilderKit restyles the panel, its backdrop and the content that goes inside it.

For a panel that opens in the middle of the screen rather than along the bottom edge, use the dialog component.

Example

Below is an example of how BuilderKit restyles the Angular Material Bottom Sheet and gives it a more modern appearance.

<button matButton (click)="openBottomSheet()">Open bottom sheet</button>

Bottom sheet with an action list

The panel holds a row of actions, each one with an icon in front of its label, and the ones that are not available stay greyed out.

<mat-action-list>
  <button mat-list-item>
    <mat-icon matListItemIcon svgIcon="share-2" />
    <span matListItemTitle>Share</span>
  </button>

  <button mat-list-item>
    <mat-icon matListItemIcon svgIcon="link" />
    <span matListItemTitle>Copy link</span>
  </button>

  <button mat-list-item disabled>
    <mat-icon matListItemIcon svgIcon="pencil" />
    <span matListItemTitle>Edit name</span>
  </button>
</mat-action-list>

Bottom sheet with a message

The panel carries a title, a line of explanation and a button that closes it, which keeps a short confirmation out of the way of the page behind it.

<h2 class="text-lg font-semibold">Share this file</h2>
<p class="mt-1 max-w-sm text-pretty text-neutral-a11">Anyone with the link can view this file. Sharing it again does not create a new link.</p>

<div class="mt-6 flex items-center justify-end gap-x-3">
  <button matButton class="primary" (click)="bottomSheetRef.dismiss()">Got it</button>
</div>