Base

Class	Description
.ui-dialog	Base class

Borderless

Class	Description
.ui-dialog--borderless	borderless

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-dialog-header-padding	calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3)	Header padding on all sides
--ui-dialog-body-padding	calc(var(--ui-unit) * 3)	Body area padding on all sides
--ui-dialog-footer-padding	calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3)	Footer padding on all sides
--ui-dialog-border-color	var(--ui-color-border)	Border color
--ui-dialog-border-width	var(--ui-border-width-sm)	Border thickness

<div class="demo-area">
  <div class="ui-modal ui-modal--visible ui-absolute">
    <div class="ui-modal__content ui-dialog ui-dialog--borderless" style="max-height: 184px;">
      <header class="ui-dialog__header">
        <h2 class="ui-dialog__title">Simple Dialog</h2>
      </header>
      <div class="ui-dialog__body">
        <p>Content without borders.</p>
      </div>
      <footer class="ui-dialog__footer">
        <button class="ui-button">OK</button>
      </footer>
    </div>
  </div>
</div>

<div class="demo-area">
  <div class="ui-modal ui-modal--sm ui-modal--visible ui-absolute">
    <div class="ui-modal__content ui-dialog">
      <header class="ui-dialog__header">
        <h2 class="ui-dialog__title">Delete Item?</h2>
      </header>
      <div class="ui-dialog__body">
        <p>This action cannot be undone.</p>
      </div>
      <footer class="ui-dialog__footer">
        <button class="ui-button ui-button--ghost">Cancel</button>
        <button class="ui-button ui-button--danger">Delete</button>
      </footer>
    </div>
  </div>
</div>