Layer

// 1) Bind click popup (recommended for buttons / links)
xjs('.btn-delete').layer({
  title: 'Delete item?',
  text: 'This action cannot be undone.',
  icon: 'warning',
  showCancelButton: true
});

// 2) Bind from data-* (no JS options needed)
xjs('.btn-data').layer(); // reads data-layer-* attributes

// 3) Fire directly (manual usage)
document.querySelector('.btn-direct').addEventListener('click', () => {
  xjs.layer({ title: 'Hello from xjs.layer()', icon: 'success' });
});

<button class="btn danger btn-delete">Delete (bind .layer)</button>

<button
  class="btn btn-data"
  data-layer-title="Data-driven popup"
  data-layer-text="Configured via data-layer-* attributes"
  data-layer-icon="success"
>Open (data-layer-*)</button>

<button class="btn btn-direct">Open (xjs.layer)</button>

.demo-visual {
  gap: 14px;
  align-items: stretch;
}
.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}
.btn.danger { border-color: rgba(255,75,75,0.5); background: rgba(255,75,75,0.12); }
.btn.danger:hover { border-color: rgba(255,75,75,0.7); background: rgba(255,75,75,0.18); }
.hint { font-size: 12px; color: #8c8c8c; line-height: 1.5; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 999px;
  padding: 8px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: #b7b7b7;
  overflow-x: auto;
  max-width: 100%;
  white-space: nowrap;
}