Dialog

Control NbDialog with v-model:open and provide a title so the dialog has an accessible name.

Preview

Open the dialog, press Tab to move through its controls, then Escape to close it.

PreviewCode

Copy

<script setup lang="ts">
import { ref } from 'vue'
import { NbButton, NbDialog } from '@neobrut-vue/core'

const open = ref(false)
</script>

<template>
  <div>
    <NbButton @click="open = true">Open dialog</NbButton>
    <NbDialog v-model:open="open" title="Ready to go?">
      <p>The dialog traps focus and closes with Escape.</p>
      <template #footer>
        <NbButton variant="accent" @click="open = false">Got it</NbButton>
      </template>
    </NbDialog>
  </div>
</template>

Usage

<NbButton @click="open = true">Open dialog</NbButton>
<NbDialog v-model:open="open" title="Ready to go?">
  Dialog content.
</NbDialog>

NbDialog restores focus to the previously active element when it closes.