Overlay

Overlay

Partially obscures the page to create a modal experience and focus the user's attention. Typically used with a Dialog or Panel.

Variants

Default

Dark

Using this component

  1. Confirm that you have references to Fabric's CSS on your page:
     <head>
         <link rel="stylesheet" href="fabric.min.css">
         <link rel="stylesheet" href="fabric.components.min.css">
     </head>
    
  2. Copy the HTML from one of the samples above into your page.
  3. Replace the sample HTML content (such as the content of .ms-Button-label) with your content.

Dependencies

This component has no dependencies.