Skip to content
7 Seventh UI CSS

Components

Bitbucket Figma

Dialog

Plain CSS implementation of the Figma Dialogs section, node 928:3844.

Medium Dialog

Sizes

Native Dialog Markup

Native Dialog

Use HTMLDialogElement.showModal() when native dialog behavior is available.

This static docs example uses open so the component is visible; production code should control open/close behavior.

Dark Theme

Accessibility Notes

Dialog behavior must move focus into the dialog, trap focus while open, close on Escape when appropriate, and return focus to the opener after close.

Use role="dialog", aria-modal="true", and a visible title referenced by aria-labelledby for non-native implementations.

CSS API

<div class="sui-dialog-backdrop"> <section class="sui-dialog sui-dialog--medium" role="dialog" aria-modal="true" aria-labelledby="dialog-title"> <header class="sui-dialog__header"> <h2 class="sui-dialog__title" id="dialog-title">Title Modal</h2> <button class="sui-dialog__close" type="button" aria-label="Close dialog">...</button> </header> <div class="sui-dialog__body">Dialog content</div> <footer class="sui-dialog__footer"> <button class="sui-btn sui-btn--secondary sui-btn--lg" type="button">Action 2</button> <button class="sui-btn sui-btn--primary sui-btn--lg" type="button">Action 1</button> </footer> </section> </div>