Dialog

Basic

BDialog component uses BCard as its base. Bind BDialog with v-model to hide and show dialog/card.

All props & slots available in BCard is available in BDialog.

<script setup lang="ts">
import { ref } from 'vue'

const isDialogShown = ref(false)
</script>

<template>
  <BDialog
    v-model="isDialogShown"
    title="Reset settings?"
    description="This will reset your app preferences back to their default settings. The following accounts will also be signed out:"
  >
    <template #actions>
      <BBtn
        variant="text"
        @click="isDialogShown = false"
      >
        Cancel
      </BBtn>
      <BBtn
        variant="text"
        @click="isDialogShown = false"
      >
        Accept
      </BBtn>
    </template>
  </BDialog>

  <BBtn
    variant="tonal"
    @click="isDialogShown = true"
  >
    Show dialog
  </BBtn>
</template>

Icon

Set the icon prop to show an icon on the dialog

<script setup lang="ts">
import { ref } from 'vue'

const isDialogShown = ref(false)
</script>

<template>
  <BDialog
    v-model="isDialogShown"
    icon="i-mdi:bag-suitcase"
    title="Reset settings?"
    description="This will reset your app preferences back to their default settings. The following accounts will also be signed out:"
  >
    <template #actions>
      <BBtn
        variant="text"
        @click="isDialogShown = false"
      >
        Cancel
      </BBtn>
      <BBtn
        variant="text"
        @click="isDialogShown = false"
      >
        Accept
      </BBtn>
    </template>
  </BDialog>

  <BBtn
    variant="tonal"
    @click="isDialogShown = true"
  >
    Show dialog
  </BBtn>
</template>

Persistent

You can disable closing dialog on click outside via persistent prop.

<script setup lang="ts">
import { ref } from 'vue'

const isDialogShown = ref(false)
</script>

<template>
  <BDialog
    v-model="isDialogShown"
    title="Dialog title"
    description="Chocolate cake tiramisu donut"
    persistent
  >
    <template #actions>
      <BBtn
        variant="text"
        @click="isDialogShown = false"
      >
        Cancel
      </BBtn>
      <BBtn
        variant="text"
        @click="isDialogShown = false"
      >
        Accept
      </BBtn>
    </template>
  </BDialog>

  <BBtn
    variant="tonal"
    color="secondary"
    @click="isDialogShown = true"
  >
    Show dialog
  </BBtn>
</template>

Programmatic dialog popper

You can use useDialog to open a dialog programmatically.

<script setup lang="ts">
import { useDialogToaster } from 'bragi-vue'

const { createDialog } = useDialogToaster()
</script>

<template>
  <BDialogToaster />

  <BBtn
    variant="tonal"
    @click="createDialog({ title: 'Confirm navigation', description: 'You have unsaved changes! Are you sure you want to leave this page?' })"
  >
    Pop confirmation dialog
  </BBtn>
</template>