Modal

No answer yet.

Declarative modal

Control the visibility with a boolean signal and model. The example above also lets you try a dialog whose close requires an explicit action.

meeko

<script lang="ts">
  const opened = signal(false)
</script>

<template>
  <UIButton on:click="() => (opened.value = true)">Open</UIButton>
  <UIModal title="Edit project" model="opened" size="md">
    <p>Content of the dialog.</p>
    <snippet name="footer">
      <UIButton on:click="() => (opened.value = false)">Done</UIButton>
    </snippet>
  </UIModal>
</template>

Open and wait for a result

You need UIApp at the root. Registry components whose name starts with Modal can be opened with typed props. A loading error rejects the promise; dismissing the dialog resolves undefined.

Inside a component ts

const modal = useModal()

// Call this function from a user action.
async function confirm() {
  const accepted = await modal.open<boolean>('ModalConfirm', {
    message: 'Do you want to confirm this action?',
  })
  // boolean | undefined: dismissing returns undefined.
  return accepted
}

app/components/Modal/Confirm.meeko meeko

<!-- app/components/Modal/Confirm.meeko -->
<script lang="ts">
  const props = defineProps<{ message: string }>()

  const modal = useModalInstance<boolean>()
</script>

<template>
  <UIModal title="Confirm" bind:description="props.message">
    <snippet name="footer">
      <UIButton variant="outline" on:click="() => modal.dismiss()">Cancel</UIButton>
      <UIButton on:click="() => modal.close(true)">Confirm</UIButton>
    </snippet>
  </UIModal>
</template>

Nested modals

Open the confirmation and then another modal to try the lg, md and sm sizes. Only the top one controls the backdrop and focus. The previous ones keep their state, stay blocked and recover focus and size when you come back. Motion is reduced when the user asks for it.

Props
Name	Type / default	Description
`title`	`string`	Required. Accessible name of the dialog.
`description`	`string`	Description associated through aria-describedby.
`model`	`Signal<boolean>` false	Declarative open control.
`size`	`sm \| md \| lg` md	Maximum width of the dialog.
`closeOnEscape / closeOnBackdrop`	`boolean` true	Allows dismissing with Escape or the backdrop.
`closeButton`	`boolean` true	Shows the close button.
`closeLabel`	`string` Close modal	Accessible name of the button. The default follows the language of the document (see Theming).
`class`	`string`	Additional classes.

It requires the default snippet and accepts footer. The dismiss event receives escape, backdrop, button or native. Do not use a modal for tasks that can be solved within the page.

Contents

Declarative modal

Open and wait for a result

Nested modals

Was this page helpful?