Dialog Component

Dialog (<dsx-dialog>)

A modal dialog Web Component wrapping the native <dialog> element.

Live Preview

Import: @bnotk/dsx/components/dialog.js

Properties

Property	Type	Default	Description
heading	string	''	Dialog title
size	'sm' | 'md' | 'lg'	'md'	Dialog width
status	'warning' | 'error' | 'success' | ''	''	Header color accent
draggable	boolean	false	Allow dragging the dialog
open	boolean (read-only)	false	Whether the dialog is open

Methods

Method	Description
show()	Open the dialog as a modal
close(returnValue?)	Close the dialog

Slots

Slot	Description
body	Main dialog content
footer	Footer with action buttons

Events

Event	Detail	Description
dsx-close	{ returnValue: string }	Dialog was closed

Usage

<script type="module">
  import '@bnotk/dsx/components/dialog.js';
</script>

<button class="dsx-btn dsx-btn--primary"
        onclick="document.querySelector('#my-dialog').show()">
  Open Dialog
</button>

<dsx-dialog id="my-dialog" heading="Confirm Action" size="md" status="warning">
  <p slot="body">Are you sure you want to proceed?</p>
  <div slot="footer">
    <button class="dsx-btn dsx-btn--secondary"
            onclick="document.querySelector('#my-dialog').close()">Cancel</button>
    <button class="dsx-btn dsx-btn--primary"
            onclick="document.querySelector('#my-dialog').close('confirm')">Confirm</button>
  </div>
</dsx-dialog>

Sizes

• sm — max-width 24rem (384px)
• md — max-width 32rem (512px)
• lg — max-width 48rem (768px)

Status Variants

The status property adds a colored accent to the dialog header:

• warning — Orange accent
• error — Red accent
• success — Green accent