Confirmation Dialog Showcase

This integration showcase uses the existing <dsx-dialog> web component to present a destructive-action confirmation flow with ds2 button styles and a warning infobox.

Live Preview

Features Demonstrated

Web Component: <dsx-dialog>
CSS classes: .dsx-btn, .dsx-btn--primary, .dsx-btn--secondary, .dsx-btn--danger
Status messaging with .dsx-infobox and .dsx-infobox--warning
Trigger button plus an initially open modal state for documentation screenshots and review

Pattern Summary

<button class="dsx-btn dsx-btn--primary" onclick="document.getElementById('confirm-dialog').show()">
  Delete Item
</button>

<dsx-dialog id="confirm-dialog" heading="Delete item?" size="sm" status="warning">
  <div slot="body" class="dsx-infobox dsx-infobox--warning">
    <p>Are you sure you want to delete this item? This action cannot be undone.</p>
  </div>
  <button slot="footer" class="dsx-btn dsx-btn--secondary">Cancel</button>
  <button slot="footer" class="dsx-btn dsx-btn--danger">Delete</button>
</dsx-dialog>

Notes

@bnotk/dsx/components/dialog.js already provides modal sizing, padding, border radius, and backdrop styling.
The public demo keeps the dialog open on load so the trigger and confirmation state are visible together.