YueDialog

YueDialog is a blocking modal surface that asks the user to finish or confirm something before continuing. It owns the focus trap, background inert computed per the modal chain, scroll lock, aria-modal, conditional return focus, top-most Escape arbitration, and a close guard; menus, tooltips, and non-modal surfaces belong to dedicated components.

Basic confirmationA real modal: Tab wraps inside the card, the background is inert, and Esc or a scrim click reports its reason.

Last close: Not closed yet

<YueButton @click="basicOpen = true">Open dialog</YueButton>
<YueDialog v-model="basicOpen" title="Sign out" description="Sign out of the current account?" @close="recordClose">
  <p>Body content goes here; the confirm and cancel buttons are built in.</p>
</YueDialog>

Dangerous confirmation

variant="danger" promotes the role to alertdialog and disables the Esc and scrim channels by default, so the user must answer through a button.

Delete confirmationThe danger variant only allows button closes; the confirm label can override the locale key through confirm-text.

<YueButton @click="dangerOpen = true" variant="outline">Delete item</YueButton>
<YueDialog v-model="dangerOpen" title="Delete item" variant="danger" confirm-text="Delete">
  <p>A dangerous action promotes the role to alertdialog and disables Esc and scrim close by default.</p>
</YueDialog>

Scrolling long content

scrollable pins the header and footer and scrolls only the body; when omitted the whole card scrolls.

Terms bodyScroll ownership switches via scrollable, while background scrolling stays locked without layout shift.

<YueDialog v-model="scrollOpen" title="Terms of service" :scrollable="true">
  <div class="long-body">A long body scrolls only the body region while header and footer stay pinned.</div>
</YueDialog>

Close guard

Every close first passes through before-close(reason); returning false or a Promise that rejects aborts the close and leaves the controlled state untouched.

Intercepting a scrim closeThe guard decides by reason: here it rejects the scrim channel and allows the others.

<YueDialog v-model="guardOpen" title="Unsaved changes" :before-close="guard">
  <p>Returning false or a rejected Promise from before-close aborts the close.</p>
</YueDialog>

Typical use

<YueDialog v-model="open" title="Title" variant="danger" @confirm="remove">
  <p>Body content goes in the default slot.</p>
</YueDialog>

The surface teleports to body by default; teleport can target another node or be set to false to keep it in place, and the enter animation flies in from the trigger's centre to the viewport centre (growing in place when there is no trigger).

See the API and Guide.