Material Design


Open bugs badge

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.


Design & API documentation

Table of contents


To display a modal using MaterialDialogs you set two properties on the view controller to be presented. Set modalPresentationStyle to UIModalPresentationCustom and set transitioningDelegate to and instance of MDCDialogTransitionController. Then you present the view controller from the root controller to display it as a modal dialog.

Presentation and transition controller

Presenting dialogs uses two classes: MDCDialogPresentationController and MDCDialogTransitionController. These allow the presentation of view controllers in a material specificed manner. MDCDialogPresentationController is a subclass of UIPresentationController that observes the presented view controller for preferred content size. MDCDialogTransitionController implements UIViewControllerAnimatedTransitioning and UIViewControllerTransitioningDelegate to vend the presentation controller during the transition.

Alert controller

MDCAlertController provides a simple interface for developers to present a modal dialog according to the Material spec.


Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponents/Dialogs'

Then, run the following command:

pod install


To import the component:


import MaterialComponents.MaterialDialogs


#import "MaterialDialogs.h"


Typical use: modal dialog


// The following is called from the presenting view controller and has the
// following variable defined to keep a reference to the transition
// controller.
strong var dialogTransitionController: MDCDialogTransitionController

// To present the dialog myDialogViewController
dialogTransitionController = MDCDialogTransitionController()
myDialogViewController.modalPresentationStyle = .custom
myDialogViewController.transitioningDelegate = dialogTransitionController

present(myDialogViewController, animated: true, completion:...)


// self is the presenting view controller and which has the following property
// defined to keep a reference to the transition controller.
@property(nonatomic) MDCDialogTransitionController *dialogTransitionController;

// To present the dialog myDialogViewController
self.dialogTransitionController = [[MDCDialogTransitionController alloc] init];
myDialogViewController.modalPresentationStyle = UIModalPresentationCustom;
myDialogViewController.transitioningDelegate = self.dialogTransitionController;
[self presentViewController:myDialogViewController animated:YES completion:...];

Typical use: alert


// Present a modal alert
let alertController = MDCAlertController(title: titleString, message: messageString)
let action = MDCAlertAction(title:"OK") { (action) in print("OK") }

present(alertController, animated:true, completion:...)


// Present a modal alert
MDCAlertController *alertController =
[MDCAlertController alertControllerWithTitle:titleString

MDCAlertAction *alertAction =
    [MDCAlertAction actionWithTitle:@"OK"
                            handler:^(MDCAlertAction *action) {

[alertController addAction:alertAction];

[self presentViewController:alertController animated:YES completion:...];


Theming Extensions

You can theme an MDCDialog to match the Material Design Dialog using your app’s scheme and the Dialogs theming extension. To add the theming extension to your project add the following line to your Podfile:

pod 'MaterialComponents/Dialogs+Theming'

Then import the theming extension and the MDCContainerScheme and create an MDCContainerScheme instance. A container scheme defines the design parameters that you can use to theme your dialogs. Finally, call the appropriate method on the theming extension.


// Step 1: Import the Dialog theming extension and container scheme
import MaterialComponents.MaterialDialogs_Theming
import MaterialComponents.MaterialContainerScheme

// Step 2: Create or get a container scheme
let containerScheme = MDCContainerScheme()

// Step 3: Apply the container scheme to your component using the desired alert style
alertController.applyTheme(withScheme: containerScheme)


// Step 1: Import the Dialog theming extension and container scheme
#import "MaterialDialogs+Theming.h"
#import "MaterialContainerScheme.h"

// Step 2: Create or get a container scheme
MDCContainerScheme *containerScheme = [[MDCContainerScheme alloc] init];

// Step 3: Apply the container scheme to your component using the desired alert style
[alertController applyThemeWithScheme:containerScheme];

Theming Actions

Actions in MDCAlertController have emphasis which affects how the Dialog’s buttons will be themed. High, Medium and low emphasis are supported.

An alert presented with a title, body, high-emphasis 'OK' button and low-emphasis 'Cancel' button.


  // Create or reuse a Container scheme
  let scheme = MDCContainerScheme()

  // Create an Alert dialog
  let alert = MDCAlertController(title: "Button Theming", message: "Add item to cart?")

  // Add actions with emphases that will generate buttons with the desired appearance. 
  // An example of a high and a medium emphasis actions:
  alert.addAction(MDCAlertAction(title:"Add Item", emphasis: .high, handler: handler))
  alert.addAction(MDCAlertAction(title:"Cancel", emphasis: .medium, handler: handler))

  // Make sure to apply theming after all actions are added, so they are themed too!
  alert.applyTheme(withScheme: scheme)

  // present the alert
  present(alertController, animated:true, completion:nil)


  // Create or reuse a Container scheme
  MDCContainerScheme *scheme = [[MDCContainerScheme alloc] init];

  // Create an Alert dialog
  MDCAlertController *alert = 
      [MDCAlertController alertControllerWithTitle:@"Button Theming" message:@"Add item to cart?"];

  // Add actions with different emphasis, creating buttons with different themes.
  MDCAlertAction *primaryAction = [MDCAlertAction actionWithTitle:@"Add Item"
  [alert addAction:primaryAction];

  MDCAlertAction *cancelAction = [MDCAlertAction actionWithTitle:@"Cancel"
  [alert addAction:cancelAction];

  // Make sure to apply theming after all actions are added, so they are themed too!
  [alert applyThemeWithScheme:scheme];

  // present the alert
  [self presentViewController:alert animated:YES completion:...];


MDCPresentationController Accessibility

As MDCPresentationController is responsible for the presentation of your custom view controllers, it does not implement any accessibility functionality itself.

-accessibilityPerformEscape Behavior

If you intend your presented view controller to dismiss when a user in VoiceOver mode has performed the escape gesture the view controller should implement the accessibilityPerformEscape method.

- (BOOL)accessibilityPerformEscape {
  [self.presentingViewController dismissViewControllerAnimated:YES completion:NULL];
  return YES;