Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Component Features

🪟 Modal & Fullscreen: Supports modal and fullscreen modes.
✋ Draggable: Supports drag-to-move dialog.
📐 Resizable: Supports resize handle to resize the dialog.
✖️ Close Button: Built-in close button with customizable trigger behavior.
⌨️ Keyboard Support: Supports Esc to close, click outside to close, and focus trap.
🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

Basic Usage

<script setup lang="ts">
import { BrDialog, BrDialogTrigger, BrDialogContent, BrDialogHeader, BrDialogTitle, BrDialogDescription, BrDialogFooter, BrButton, BrInput, BrLabel, BrDialogClose } from '@breezeui/vue'
</script>

<template>
  <BrDialog>
    <BrDialogTrigger as-child>
      <BrButton outline>Edit Profile</BrButton>
    </BrDialogTrigger>
    <BrDialogContent class="sm:max-w-[425px]">
      <BrDialogHeader>
        <BrDialogTitle>Edit profile</BrDialogTitle>
        <BrDialogDescription>
          Make changes to your profile here. Click save when you're done.
        </BrDialogDescription>
      </BrDialogHeader>
      <div class="grid gap-4 py-4">
        <div class="grid grid-cols-4 items-center gap-4">
          <BrLabel for="name" class="text-right">Name</BrLabel>
          <BrInput id="name" value="Pedro Duarte" class="col-span-3" />
        </div>
        <div class="grid grid-cols-4 items-center gap-4">
          <BrLabel for="username" class="text-right">Username</BrLabel>
          <BrInput id="username" value="@peduarte" class="col-span-3" />
        </div>
      </div>
      <BrDialogFooter>
        <BrDialogClose as-child>
          <BrButton type="button" outline>Cancel</BrButton>
        </BrDialogClose>
        <BrButton type="submit">Save changes</BrButton>
      </BrDialogFooter>
    </BrDialogContent>
  </BrDialog>
</template>

You can customize the footer actions.

<script setup lang="ts">
import { BrDialog, BrDialogTrigger, BrDialogContent, BrDialogHeader, BrDialogTitle, BrDialogDescription, BrDialogFooter, BrButton, BrDialogClose } from '@breezeui/vue'
</script>

<template>
  <BrDialog>
    <BrDialogTrigger as-child>
      <BrButton color="danger">Delete Account</BrButton>
    </BrDialogTrigger>
    <BrDialogContent>
      <BrDialogHeader>
        <BrDialogTitle>Are you absolutely sure?</BrDialogTitle>
        <BrDialogDescription>
          This action cannot be undone. This will permanently delete your account and remove your data from our servers.
        </BrDialogDescription>
      </BrDialogHeader>
      <BrDialogFooter>
        <BrDialogClose as-child>
          <BrButton type="button" outline>
            Cancel
          </BrButton>
        </BrDialogClose>
        <BrButton type="button" color="danger">
          Yes, Delete
        </BrButton>
      </BrDialogFooter>
    </BrDialogContent>
  </BrDialog>
</template>

Fullscreen

Dialog can cover the entire screen.

<script setup lang="ts">
import { BrDialog, BrDialogTrigger, BrDialogContent, BrDialogHeader, BrDialogTitle, BrDialogDescription, BrButton } from '@breezeui/vue'
</script>

<template>
  <BrDialog>
    <BrDialogTrigger as-child>
      <BrButton>Open Fullscreen Dialog</BrButton>
    </BrDialogTrigger>
    <BrDialogContent fullscreen>
      <BrDialogHeader>
        <BrDialogTitle>Fullscreen Dialog</BrDialogTitle>
        <BrDialogDescription>
          This dialog covers the entire screen.
        </BrDialogDescription>
      </BrDialogHeader>
      <div class="flex-1 overflow-auto p-4">
        <p v-for="i in 20" :key="i" class="mb-4">
          Scrollable content... {{ i }}
        </p>
      </div>
    </BrDialogContent>
  </BrDialog>
</template>

Draggable & Resizable

Dialog can be dragged by the header and resized.

<script setup lang="ts">
import { BrDialog, BrDialogTrigger, BrDialogContent, BrDialogHeader, BrDialogTitle, BrDialogDescription, BrButton } from '@breezeui/vue'
</script>

<template>
  <BrDialog>
    <BrDialogTrigger as-child>
      <BrButton>Open Draggable Dialog</BrButton>
    </BrDialogTrigger>
    <BrDialogContent draggable resizable class="sm:max-w-[500px]">
      <BrDialogHeader>
        <BrDialogTitle>Draggable & Resizable Dialog</BrDialogTitle>
        <BrDialogDescription>
          You can drag this dialog by the header and resize it from the bottom-right corner.
        </BrDialogDescription>
      </BrDialogHeader>
      <div class="py-4">
        <p>Try moving me around!</p>
      </div>
    </BrDialogContent>
  </BrDialog>
</template>

Theming

Global Customization (BrConfigProvider)

You can override default CSS variables via the theme prop of BrConfigProvider.

<script setup lang="ts">
import { BrDialog, BrDialogTrigger, BrDialogContent, BrDialogHeader, BrDialogTitle, BrDialogDescription, BrButton, BrConfigProvider } from '@breezeui/vue'

const theme = {
  radius: '1rem',
  primary: '#10b981', // Emerald 500
  background: '#f0fdf4', // Emerald 50
  foreground: '#064e3b', // Emerald 900
}
</script>

<template>
  <BrConfigProvider :theme="theme">
    <BrDialog>
      <BrDialogTrigger as-child>
        <BrButton>Open Themed Dialog</BrButton>
      </BrDialogTrigger>
      <BrDialogContent>
        <BrDialogHeader>
          <BrDialogTitle>Themed Dialog</BrDialogTitle>
          <BrDialogDescription>
            This dialog inherits styles from BrConfigProvider.
          </BrDialogDescription>
        </BrDialogHeader>
        <div class="py-4">
          <p>Notice the custom colors and radius.</p>
        </div>
      </BrDialogContent>
    </BrDialog>
  </BrConfigProvider>
</template>

API

BrDialog

Name	Type	Default	Description
open	`boolean`	`undefined`	The controlled open state of the dialog.
defaultOpen	`boolean`	`undefined`	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
modal	`boolean`	`true`	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled (including scroll lock). Set to `false` if you want to keep the page scrollable.

BrDialogContent

Name	Type	Default	Description
class	`string`	`undefined`	Additional classes to apply to the content.
showClose	`boolean`	`true`	Whether to show the close button.
fullscreen	`boolean`	`false`	Whether to render in fullscreen mode.
draggable	`boolean`	`false`	Whether the dialog is draggable (drag handle is the header).
resizable	`boolean`	`false`	Whether the dialog is resizable.

BrDialogTrigger

Name	Type	Default	Description
asChild	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.

BrDialogTitle

Name	Type	Default	Description
asChild	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.

BrDialogDescription

Name	Type	Default	Description
asChild	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.

#Dialog

#Component Features

#Basic Usage

#Custom Footer

#Fullscreen

#Draggable & Resizable

#Theming

#Global Customization (BrConfigProvider)

#API

#BrDialog

#BrDialogContent

#BrDialogTrigger

#BrDialogTitle

#BrDialogDescription