Modal

Usage

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

<Modal
  title="Dialog"
  description="description"
  open="false"
  size="md"
  closeLabel="Close"
/>

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

Props and attributes

Slots

• default

Events

• click

Source contract

Installed source: components/Modal.wrn

component Modal {
  props {
    class = ""
    title = "Dialog"
    description = ""
    open = false
    size = "md"
    closeLabel = "Close"
  }
  state visible = open
  view {
        <div data-show="visible" class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center {class}" role="dialog" aria-modal="true" aria-labelledby="modal-title">
        <button class="absolute inset-0 bg-slate-950/60 backdrop-blur-sm" aria-label="{closeLabel}" @click="visible = false">
        </button>
        <section class="relative max-h-[90vh] w-full overflow-auto rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900 {size === 'sm' ? 'max-w-md' : size === 'lg' ? 'max-w-4xl' : 'max-w-2xl'}">
        <header class="flex items-start justify-between gap-4">
        <div>
        <h2 id="modal-title" class="text-xl font-bold">{title}</h2>
        <p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p>
        </div>
        <button type="button" aria-label="{closeLabel}" @click="visible = false" class="inline-flex size-10 items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">×</button>
        </header>
        <div class="mt-5">
        <slot />
        </div>
        </section>
        </div>
    }
}