# Dialog Displays content that temporarily blocks interactions with the application. It is primarily used for confirmation tasks, light-weight creation or edit tasks, and simple management tasks. ## Variants ### Default Includes a content area and two buttons. @@include('Dialog.html') ### Multiline Includes multiple large buttons, each with a title and description. @@include('Dialog.Multiline.html') ### Large Header Provides a large, styled header followed by a content area and two buttons. @@include('Dialog.LgHeader.html') ### Blocking The overlay for this variant does not dismiss the Dialog. @@include('Dialog.Blocking.html') ### Close Includes a close button at the top right, as an additional way to dismiss the dialog. @@include('Dialog.Close.html') ## States This component has only the default state. ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: ``` ``` 2. Copy the HTML from one of the samples above into your page. For example: ```

Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.

Option1

Option2

``` 3. Add the following ` ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content (such as the content of `.ms-Dialog-content`) with your content. ## Dependencies This component has no dependencies on other components. ## Accessibility More details will be added here.