Dialog

A component that facilitates a conversation between the system and the user. They often request information or an action from the user.

dialog + dialog__body

This is some dialog content...

<div class="dialog">
  <div class="dialog__body">
    ...
  </div>
</div>

dialog__close

This is some dialog content...

<div class="dialog">
  <button class="dialog__close icon-action icon-action_color_fade">
    <svg role="img" class="icon">
      <use xlink:href="#x"></use>
    </svg>
  </button>
  <div class="dialog__body">
    ...
  </div>
</div>

dialog__title

Dialog Title

This is some dialog content...

<div class="dialog">
  <button class="dialog__close">...</button>
  <div class="dialog__body">
    <h2 class="dialog__title">...</h2>
    ...
  </div>
</div>

dialog__header + dialog__footer

Dialog Title

This is some dialog content...

<div class="dialog">
  <div class="dialog__header">
    ...
  </div>
  <div class="dialog__body">
    ...
  </div>
  <div class="dialog__footer">
    ...
  </div>
</div>

Dialog examples

The dialog is a very flexible component and can be used in many different contexts. Here are more examples of the dialog component.

Message

New Message

<div class="dialog">
  <div class="dialog__header">
    <h2 class="dialog__title">...</h2>
    <div class="dialog__group">
      ...
    </div>
  </div>
  <form class="dialog__body">
    ...
  </form>
  <div class="dialog__footer justify_between">
    <div class="button-group">
      ...
    </div>
    <div class="button-group">
      ...
    </div>
  </div>
</div>

Confirmation

Did you forget an attachment?

You wrote "I have attached" in your message, but there are no files attached. Send anyway?

<div class="dialog">
  <div class="dialog__body padding_md">
    ...
  </div>
  <div class="dialog__footer justify_end">
    <div class="button-group">
      ...
    </div>
  </div>
</div>