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

In this example, I’m including the icon-action component in our dialog__close composition.

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__group

Dialog Conditions

Do you accept the conditions of this dialog?

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

justify_[value]

Dialog Conditions

Do you accept the conditions of this dialog?

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

Dialog Conditions

Do you accept the conditions of this dialog?

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

Dialog Conditions

Do you accept the conditions of this dialog?

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

Dialog Structural Elements

These elements are unique because they should only be used as direct children of the dialog element.

dialog__header

Dialog Title

This is some dialog content...

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

This is some dialog content...

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

Examples

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

New Message

<div class="dialog" data-dismissible>
  <div class="dialog__header">
    <h2 class="dialog__title">New Message</h2>
    <div class="dialog__group">
      <button class="dialog__group-item icon-action icon-action_color_fade" data-dismiss>
        <svg role="img" class="icon">
          <use xlink:href="#minus"></use>
        </svg>
      </button>
      <button class="dialog__group-item icon-action icon-action_color_fade">
        <svg role="img" class="icon">
          <use xlink:href="#maximize-2"></use>
        </svg>
      </button>
      <button class="dialog__group-item dialog__close icon-action icon-action_color_fade">
        <svg role="img" class="icon">
          <use xlink:href="#x"></use>
        </svg>
      </button>
    </div>
  </div>
  <form class="dialog__body">
    <input type="text" class="input" placeholder="Recipients" />
    <input type="text" class="input" placeholder="Subjects" />
    <textarea class="input input_type_textarea" placeholder="..."></textarea>
  </form>
  <div class="dialog__footer justify_between">
    <div class="dialog__group">
      <button class="button button_color_primary">Send</button>
      <button class="button button_icon">
        <svg role="img" class="icon">
          <use xlink:href="#paperclip"></use>
        </svg>
      </button>
      <button class="button button_icon">
        <svg role="img" class="icon">
          <use xlink:href="#image"></use>
        </svg>
      </button>
    </div>
    <div class="dialog__group">
      <button class="button button_icon">
        <svg role="img" class="icon">
          <use xlink:href="#trash"></use>
        </svg>
      </button>
      <button class="button button_icon">
        <svg role="img" class="icon">
          <use xlink:href="#chevron-up"></use>
        </svg>
      </button>
    </div>
  </div>
</div>

Did you forget an attachment?

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

<div class="dialog" data-dismissible>
  <button class="dialog__close icon-action icon-action_color_fade" data-dismiss>
    <svg role="img" class="icon">
      <use xlink:href="#x"></use>
    </svg>
  </button>
  <div class="dialog__body p_2">
    <h2 class="dialog__title">Did you forget an attachment?</h2>
    <p>You wrote "I have attached" in your message, but there are no files attached. Send anyway?</p>
  </div>
  <div class="dialog__footer justify_end">
    <button class="button button_min-width">Cancel</button>
    <button class="button button_min-width button_color_primary">Ok</button>
  </div>
</div>