Dialog

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

npm version

Source Code

npm install @vrembem/dialog
@use "@vrembem/dialog";

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">
    <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>
    <p>...</p>
  </div>
</div>

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 flex-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-lg">
    ...
  </div>
  <div class="dialog__footer flex-justify-end">
    ...
  </div>
</div>