Layer

// Bind the buttons below (selector + click handlers)
// Icon buttons: read config from data-layer-* and open popup on click
xjs('[data-layer-icon]').layer();

// Confirm flow: custom handler so we can handle the Promise result
xjs('.btn.confirm').forEach((el) => {
  // Idempotent binding (in case this demo re-inits)
  if (el._xjsConfirmHandler) el.removeEventListener('click', el._xjsConfirmHandler);
  el._xjsConfirmHandler = () => {
    xjs.layer({
      title: 'Delete item?',
      text: 'This action cannot be undone.',
      icon: 'question',
      showCancelButton: true,
      confirmButtonText: 'Delete',
      cancelButtonText: 'Cancel'
    }).then((res) => {
      if (res.isConfirmed) {
        xjs.layer({ title: 'Deleted', text: 'Done', icon: 'success' });
      } else if (res.dismiss === 'cancel') {
        xjs.layer({ title: 'Cancelled', text: 'Nothing happened', icon: 'info' });
      }
    });
  };
  el.addEventListener('click', el._xjsConfirmHandler);
});

<button class="btn success" data-layer-title="Success" data-layer-text="SVG icon draw + spring entrance" data-layer-icon="success">Success</button>
<button class="btn error" data-layer-title="Error" data-layer-text="SVG icon draw + spring entrance" data-layer-icon="error">Error</button>
<button class="btn warning" data-layer-title="Warning" data-layer-text="SVG icon draw + spring entrance" data-layer-icon="warning">Warning</button>
<button class="btn info" data-layer-title="Info" data-layer-text="SVG icon draw + spring entrance" data-layer-icon="info">Info</button>
<button class="btn confirm">Confirm</button>

/* This page's button styles are local.
   Layer's own CSS is injected by layer.js */