ConfirmationDialog

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ConfirmationDialog
  title="Confirm action"
  description="Are you sure you want to continue?"
  confirmLabel="Confirm"
  cancelLabel="Cancel"
  danger="false"
/>

Legacy mount name: data-component="ConfirmationDialog".

Props and attributes

Slots

• confirm

Events

• click

Source contract

Installed source: components/ConfirmationDialog.wrn

component ConfirmationDialog {
  props {
    title = "Confirm action"
    description = "Are you sure you want to continue?"
    confirmLabel = "Confirm"
    cancelLabel = "Cancel"
    danger = false
    open = false
    class = ""
  }
  state visible = open
  view {
        <div data-show="visible" class="wire-overlay {class}" role="presentation">
        <section role="alertdialog" aria-modal="true" aria-labelledby="confirmation-title" aria-describedby="confirmation-description" class="wire-dialog">
        <h2 id="confirmation-title" class="wire-dialog__title">{title}</h2>
        <p id="confirmation-description" class="wire-dialog__description">{description}</p>
        <div class="wire-dialog__actions">
        <button type="button" class="wire-btn wire-btn--ghost" @click="visible = false">{cancelLabel}</button>
        <button type="button" class="wire-btn {danger ? 'wire-btn--danger' : 'wire-btn--primary'}">
        <slot name="confirm">{confirmLabel}</slot>
        </button>
        </div>
        </section>
        </div>
    }
}