overlays component

ConfirmationDialog

Reusable confirmation dialog component.

@wrnexus/ui 0.2.647 props1 slots1 events

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

Prop	Type	Requirement	Default
`title`	`string`	Optional	`"Confirm action"`
`description`	`string`	Optional	`"Are you sure you want to continue?"`
`confirmLabel`	`string`	Optional	`"Confirm"`
`cancelLabel`	`string`	Optional	`"Cancel"`
`danger`	`boolean`	Optional	`false`
`open`	`boolean`	Optional	`false`
`class`	`string`	Optional	`""`

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>
  }
}