Material Design

Sheets: bottom

Bottom sheets slide up from the bottom of the screen to reveal more content. Bottom sheets integrate with the app to display supporting content or present deep-linked content from other apps.

Bottom Sheet

Design & API Documentation


Installation with CocoaPods

To add this component to your Xcode project using CocoaPods, add the following to your Podfile:

pod 'MaterialComponents/BottomSheet'

Then, run the following command:

pod install



Before using Bottom Sheet, you’ll need to import it:


import MaterialComponents.MaterialBottomSheet


#import "MaterialBottomSheet.h"


Create a view controller that the bottom sheet will hold and initialize the bottom sheet with that view controller. After the bottom sheet is created, it is ready to be presented on the current view controller.


// View controller the bottom sheet will hold
let viewController: ViewController = ViewController()
// Initialize the bottom sheet with the view controller just created
let bottomSheet: MDCBottomSheetController = MDCBottomSheetController(contentViewController: viewController)
// Present the bottom sheet
present(bottomSheet, animated: true, completion: nil)


// View controller the bottom sheet will hold
ViewController *viewController = [[ViewController alloc] init];
// Initialize the bottom sheet with the view controller just created
MDCBottomSheetController *bottomSheet = [[MDCBottomSheetController alloc] initWithContentViewController:viewController];
// Present the bottom sheet
[self presentViewController:bottomSheet animated:true completion:nil];

Create a button that will call the code above.


let button = UIButton(frame: .zero)
button.addTarget(self, action: #selector(presentBottomSheet), for: .touchUpInside)


_button = [[UIButton alloc] initWithFrame:CGRectZero];
[_button addTarget:self action:@selector(presentBottomSheet) forControlEvents:UIControlEventTouchUpInside];