Dialog

The dialog is a container displayed in response to an action.

Introduction

The dialog control interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.

Use the dialog if:

You want to display complex content, but don’t want the user to navigate away from the current page.
You want to display an additional step or process that needs to be confirmed by a user action.
You want to enable the user to create an object with a small number of fields (up to 8 fields).

Do not use the dialog if:

You want to display a simple message. Use the message box instead.
You just want to confirm a successful action.
You do not want to interrupt the user.
You want to enable users to create an object with more than 8 fields. Use an object page instead.

Dialog structure

Dialog consists of following elements:

.fd-dialog: Wraps dialog and displays it with position: fixed. Dialog can be made visible by applying .fd-dialog--active class
- .fd-dialog__content: Dialog dialog window
  - .fd-dialog__header: Header
    - .fd-dialog__title: Dialog title
  - .fd-dialog__subheader: Subheader
  - .fd-dialog__body: Dialog content
  - .fd-dialog__loader: Dialog loader
  - .fd-dialog__footer: Dialog footer
    - .fd-dialog__decisive-button: Footer begin/end button
  - .fd-dialog__resize-handle: Handle for resizing modal

Dialogs header, subheader and footer elements are composed out of Bar Component. CSS classes provided by Dialog component are used to slightly override Bar behaviour in favour of Dialog styling, but Dialog headers and footer can be customized using Bar component features.

Dialog header

Dialog title

Dialog subheader

Dialog body

Dialog loader

    <div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
        <div class="fd-dialog__content">
            <span class="fd-dialog__resize-handle"></span>
            <header class="fd-dialog__header fd-bar fd-bar--header-with-subheader">
                <div class="fd-bar__left">
                    <div class="fd-bar__element">
                        Dialog header
                    </div>
                    <div class="fd-bar__element">
                        <h3 class="fd-dialog__title">
                            Dialog title
                        </h3>
                    </div>
                </div>
            </header>
            <div class="fd-dialog__subheader fd-bar fd-bar--subheader">
                <div class="fd-bar__left">
                    <div class="fd-bar__element">
                        Dialog subheader
                    </div>
                </div>
            </div>
            <div class="fd-dialog__body">
                Dialog body
                <div class="fd-dialog__loader">
                    Dialog loader
                </div>
            </div>
            <footer class="fd-dialog__footer fd-bar fd-bar--footer">
                <div class="fd-bar__right">
                    <div class="fd-bar__element">
                        Dialog footer
                    </div>
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--compact">
                            Begin button
                        </button>
                    </div>
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--compact">
                            End button
                        </button>
                    </div>
                </div>
            </footer>
        </div>
    </div>

Dialog size modifiers

By default dialog body has no horizontal paddings. Header, subheader, body and footer paddings should be applied responsively based on dialogs window width.
Modifying header/subheader/body/footer horizontal paddings:

.fd-dialog__content--s: 1rem - max-width: 599px
.fd-dialog__content--m: 2rem - min-width: 600px and max-width: 1023px
.fd-dialog__content--l: 2rem - min-width: 1024px and max-width: 1439px
.fd-dialog__content--xl: 3rem - min-width: 1440px

By default dialog body has vertical padding. This behavior might be changed using:

.fd-dialog__body--no-vertical-padding: padding-top: 0, padding-bottom: 0

By default dialog on mobile devices should take full height and width of the screen. This behaviour can be changed using .fd-dialog__content--no-mobile-stretch class, which will add additional spacing around dialog.

.fd-dialog__content--mobile: dialog takes full height and width
.fd-dialog__content--no-mobile-stretch: margin: 6% 10%

Please remember that on mobile devices Bar component should be used with .fd-bar--cosy class.

Dialog header/body/footer horizontal paddings

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

    <div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
        <div class="fd-dialog__content fd-dialog__content--s">
            <header class="fd-dialog__header fd-bar fd-bar--header">
                <div class="fd-bar__left">
                    <div class="fd-bar__element">
                        <h3 class="fd-dialog__title">
                            Small Dialog
                        </h3>
                    </div>
                </div>
            </header>
            <div class="fd-dialog__body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            </div>
            <footer class="fd-dialog__footer fd-bar fd-bar--footer">
                <div class="fd-bar__right">
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--emphasized fd-button--compact">Save</button>
                    </div>
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact">Cancel</button>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <br />
    <div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
        <div class="fd-dialog__content fd-dialog__content--m">
            <header class="fd-dialog__header fd-bar fd-bar--header">
                <div class="fd-bar__left">
                    <div class="fd-bar__element">
                        <h3 class="fd-dialog__title">
                            Medium Dialog
                        </h3>
                    </div>
                </div>
            </header>
            <div class="fd-dialog__body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            </div>
            <footer class="fd-dialog__footer fd-bar fd-bar--footer">
                <div class="fd-bar__right">
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--emphasized fd-button--compact">Save</button>
                    </div>
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact">Cancel</button>
                    </div>
                </div>
            </footer>
        </div> 
    </div>
    <br />
    <div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
        <div class="fd-dialog__content fd-dialog__content--l">
            <header class="fd-dialog__header fd-bar fd-bar--header">
                <div class="fd-bar__left">
                    <div class="fd-bar__element">
                        <h3 class="fd-dialog__title">
                            Large Dialog
                        </h3>
                    </div>
                </div>
            </header>
            <div class="fd-dialog__body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            </div>
            <footer class="fd-dialog__footer fd-bar fd-bar--footer">
                <div class="fd-bar__right">
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--emphasized fd-button--compact">Save</button>
                    </div>
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact">Cancel</button>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <br />
    <div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
        <div class="fd-dialog__content fd-dialog__content--xl">
            <header class="fd-dialog__header fd-bar fd-bar--header">
                <div class="fd-bar__left">
                    <div class="fd-bar__element">
                        <h3 class="fd-dialog__title">
                            Extra Large Dialog
                        </h3>
                    </div>
                </div>
            </header>
            <div class="fd-dialog__body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            </div>
            <footer class="fd-dialog__footer fd-bar fd-bar--footer">
                <div class="fd-bar__right">
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--emphasized fd-button--compact">Save</button>
                    </div>
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact">Cancel</button>
                    </div>
                </div>
            </footer>
        </div>
    </div>

Dialog with resize handle

To open Dialog with resize handle add span element with .fd-dialog__resize-handle class inside .fd-dialog__content container. Horizontal and vertical resize should be enabled only for desktop devices. Resizable Dialog should be desktop only feature.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

    <div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
        <div class="fd-dialog__content fd-dialog__content--s">
            <span class="fd-dialog__resize-handle"></span>
            <header class="fd-dialog__header fd-bar fd-bar--header">
                <div class="fd-bar__left">
                    <div class="fd-bar__element">
                        <h3 class="fd-dialog__title">
                            Lorem ipsum
                        </h3>
                    </div>
                </div>
            </header>
            <div class="fd-dialog__body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            </div>
            <footer class="fd-dialog__footer fd-bar fd-bar--footer">
                <div class="fd-bar__right">
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--emphasized fd-button--compact">Save</button>
                    </div>
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact">Cancel</button>
                    </div>
                </div>
            </footer>
        </div>
    </div>

Dialog draggable mode

Dialog can be opened in draggable mode, enabling drag dialog over browser view-port area (only for desktop). Draggable mode can be visualized using following classes:

.fd-dialog__content--draggable-grab: element can be dragged
.fd-dialog__content--draggable-grabbing: element is being dragged

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

    <div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
        <div class="fd-dialog__content fd-dialog__content--draggable-grab fd-dialog__content--s">
            <header class="fd-dialog__header fd-bar fd-bar--header">
                <div class="fd-bar__left">
                    <div class="fd-bar__element">
                        <h3 class="fd-dialog__title">
                            Lorem ipsum
                        </h3>
                    </div>
                </div>
            </header>
            <div class="fd-dialog__body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            </div>
            <footer class="fd-dialog__footer fd-bar fd-bar--footer">
                <div class="fd-bar__right">
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--emphasized fd-button--compact">Save</button>
                    </div>
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact">Cancel</button>
                    </div>
                </div>
            </footer>
        </div>
    </div>

Examples

Select Dialog

List item 1
List item 2
List item 3
List item 4
List item 5
List item 6
2 items selected

    <button class="fd-button" onclick="toggleDialog('select-dialog-example', true)">Open example</button>
    <div class="fd-dialog" id="select-dialog-example">
        <div class="fd-dialog__content">
            <header class="fd-dialog__header fd-bar fd-bar--header-with-subheader">
                <div class="fd-bar__left">
                    <div class="fd-bar__element">
                        <h3 class="fd-dialog__title">
                            Select Dialog
                        </h3>
                    </div>
                </div>
                <div class="fd-bar__right">
                    <div class="fd-bar__element">
                        <button class="fd-button fd-button--transparent fd-button--compact">Clear</button>
                    </div>
                </div>
            </header>
            <div class="fd-dialog__subheader fd-bar fd-bar--subheader">
                <div class="fd-bar__middle">
                    <div class="fd-input-group">
                        <input class="fd-input fd-input-group__input fd-input--compact" type="text" placeholder="Search...">
                        <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
                            <button class="fd-button fd-input-group__button fd-button--icon fd-button--transparent fd-button--compact sap-icon--search"></button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="fd-dialog__body fd-dialog__body--no-vertical-padding">
                <ul class="fd-list fd-list--compact">
                  <li class="fd-list__item">
                      <span class="fd-list__title">List item 1</span>
                  </li>
                  <li class="fd-list__item">
                      <span class="fd-list__title">List item 2</span>
                  </li>
                  <li class="fd-list__item is-active">
                      <span class="fd-list__title">List item 3</span>
                  </li>
                  <li class="fd-list__item is-active">
                      <span class="fd-list__title">List item 4</span>
                  </li>
                  <li class="fd-list__item">
                      <span class="fd-list__title">List item 5</span>
                  </li>
                  <li class="fd-list__item">
                      <span class="fd-list__title">List item 6</span>
                  </li>
                  <li class="fd-list__footer">
                      2 items selected
                  </li>
                </ul>
            </div>
            <footer class="fd-dialog__footer fd-bar fd-bar--footer">
                <div class="fd-bar__right">
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--emphasized fd-button--compact">Select</button>
                    </div>
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact" onclick="toggleDialog('select-dialog-example', false)">Cancel</button>
                    </div>
                </div>
            </footer>
        </div>
    </div>

Loading Dialog

Status: Connecting 127.0.0.1

    <button class="fd-button" onclick="toggleDialog('loading-dialog-example', true)">Open example</button>
    <div class="fd-dialog" id="loading-dialog-example">
        <div class="fd-dialog__content fd-dialog__content--s">
            <header class="fd-dialog__header fd-bar fd-bar--header">
                <div class="fd-bar__left">
                    <div class="fd-bar__element">
                        <h1 class="fd-dialog__title">
                            Loading Data...
                        </h1>
                    </div>
                </div>
            </header>
            <div class="fd-dialog__body">
                <strong>Status:</strong> Connecting 127.0.0.1
                <div class="fd-dialog__loader fd-busy-indicator--l" aria-hidden="false" aria-label="Loading">
                    <div class="fd-busy-indicator--circle-0"></div>
                    <div class="fd-busy-indicator--circle-1"></div>
                    <div class="fd-busy-indicator--circle-2"></div>
                </div>
            </div>
            <footer class="fd-dialog__footer fd-bar fd-bar--footer">
                <div class="fd-bar__right">
                    <div class="fd-bar__element">
                        <button class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact" onclick="toggleDialog('loading-dialog-example', false)">Cancel</button>
                    </div>
                </div>
            </footer>
        </div>
    </div>