Components

Dialogues

Dialogs interrupt the flow on purpose. They are reserved for decisions, confirmations and short tasks that need the full attention of the page.

Published Version 1.0.0 500px max width

Live example

Open the dialog to see the overlay, surface, close control and footer actions together. Press Escape or click outside to dismiss it.

Publishing

Ready to share this style guide?

Publishing creates a stable stylesheet URL for this version. Existing applications can keep using the old URL while new work picks up the latest release.

Anatomy

The overlay provides separation, the dialog surface carries the decision, and the footer keeps the actions together.

Structure

<div class="sg-dialog-overlay">
  <div class="sg-dialog" role="dialog" aria-modal="true">
    <div class="sg-dialog__header">
      <h2 class="sg-dialog__title">Publish version?</h2>
      <button class="sg-dialog__close">×</button>
    </div>
    <div class="sg-dialog__body">
      <p>Supporting copy goes here.</p>
    </div>
    <div class="sg-dialog__footer">
      <button class="sg-button sg-button--secondary">Cancel</button>
      <button class="sg-button sg-button--primary">Confirm</button>
    </div>
  </div>
</div>

Tokens

Max width 500px

Radius 0.5rem

Padding 1.5rem

Overlay rgba(33, 37, 41, 0.55)

Backdrop blur blur(0px)