🟢 Dialog

Supports modal and non-modal modes.
Focus is automatically trapped when modal.
Can be controlled or uncontrolled.
Manages screen reader announcements with Title andDescription components.
Esc closes the component automatically.

Basic

NDialog is used to create dialog windows inside the web browser. It can be used for messages, prompts, logins, and much more.

Prop	Type	Default	Description
`title`	String	`null`	The title of the dialog.
`description`	String	`null`	The description of the dialog.
`showClose`	Boolean	`true`	Show the close button.

All the props available in the Radix Vue Dialog are also available via its subcomponents' prop names, e.g., _dialog-content, _dialog-title, etc. refer to Dialog Props for more details.

Scrollable Content

Prop	Type	Description
`scrollable`	Boolean	If true, the dialog will have a scrollable body.

Prevent Closing

Prop	Type	Description
`preventClose`	Boolean	If true, the dialog will not close on overlay click or escape key press.

Slots

Slot	Properties	Description
`trigger`	`open`	The trigger button used to open the dialog
`default`	-	The body of the dialog
`content`	-	The full content of the dialog. It covers the header, body, footer, and default slots.
`header`	-	Contains the title and description slots
`footer`	-	The footer.
`title`	-	The title displayed in the dialog.
`description`	-	The description displayed below the title.

Custom Close Button

Scrollable Body

A login dialog with state which closes itself after a successful login.

<script setup lang="ts">
const username = ref('')
const password = ref('')

const loginStatus = ref<'inactive' | 'pending' | 'success' | 'failed'>('inactive')
const loginMessage = ref('')

const open = ref(false)

watch(open, () => {
  // Dialog refs stay loaded. They need to be reset when opened.
  username.value = ''
  password.value = ''
  loginStatus.value = 'inactive'
  loginMessage.value = ''
})

async function sleep(seconds: number) {
  await new Promise<void>((resolve) => {
    setTimeout(() => {
      resolve()
    }, seconds * 1000)
  })
}

async function submitLogin() {
  loginStatus.value = 'pending'
  loginMessage.value = ''
  await sleep(1)

  if (username.value === 'username' && password.value === 'password') {
    loginStatus.value = 'success'
    loginMessage.value = 'Login success!'
    await sleep(3)
    open.value = false
  }
  else {
    loginStatus.value = 'failed'
    loginMessage.value = 'Invalid Username/Password'
  }
}
</script>

<template>
  <NDialog
    v-model:open="open"
    title="Login"
    description="Please log in with your username and password"
  >
    <template #trigger>
      <NButton btn="solid-gray" label="Login" leading="i-mdi:login" />
    </template>
    <template #default>
      <form
        id="login-form" class="grid space-y-4"
        @submit.prevent="submitLogin()"
      >
        <NFormGroup label="Username">
          <NInput
            v-model="username"
            placeholder=""
            required
            :disabled="loginStatus === 'pending' || loginStatus === 'success'"
          />
        </NFormGroup>
        <NFormGroup label="Password">
          <NInput
            v-model="password"
            type="password"
            required
            :disabled="loginStatus === 'pending' || loginStatus === 'success'"
          />
          <div class="text-end">
            <NPopover>
              <template #trigger>
                <NButton btn="link-muted" class="text-xs text-muted">
                  Forgot password?
                </NButton>
              </template>
              <div>
                <p>Your username is <span class="font-mono">username</span></p>
                <p>Your password is <span class="font-mono">password</span></p>
              </div>
            </NPopover>
          </div>
        </NFormGroup>
      </form>
    </template>
    <template #footer>
      <span
        v-if="loginMessage"
        class="animate-in animate-duration-1s fade-in slide-in-from-right-4"
        :class="{
          'text-green': loginStatus === 'success',
          'text-red': loginStatus === 'failed',
        }"
      >
        {{ loginMessage }}
      </span>
      <NButton
        type="submit"
        form="login-form"
        btn="solid"
        label="Login"
        leading="i-mdi:login"
        :loading="loginStatus === 'pending'"
        :disabled="loginStatus === 'success'"
      />
    </template>
  </NDialog>
</template>

Blurred Background

A dialog whose overlay blurs the background content.

Props

import type {
  DialogCloseProps,
  DialogContentProps,
  DialogDescriptionProps,
  DialogRootProps,
  DialogTitleProps,
} from 'radix-vue'
import type { HTMLAttributes } from 'vue'
import type { NButtonProps } from './button'

export interface NDialogProps extends DialogRootProps {
  title?: string
  description?: string
  scrollable?: boolean
  showClose?: boolean
  preventClose?: boolean

  // sub-components
  _dialogTitle?: NDialogTitleProps
  _dialogDescription?: NDialogDescriptionProps
  _dialogHeader?: NDialogHeaderProps
  _dialogFooter?: NDialogFooterProps
  _dialogOverlay?: NDialogOverlayProps
  _dialogContent?: NDialogContentProps
  _dialogClose?: NDialogCloseProps

  una?: NDialogUnaProps
}

interface BaseExtensions {
  class?: HTMLAttributes['class']
}

export interface NDialogTitleProps extends DialogTitleProps, BaseExtensions {
  una?: NDialogUnaProps['dialogTitle']
}

export interface NDialogDescriptionProps extends DialogDescriptionProps, BaseExtensions {
  una?: NDialogUnaProps['dialogDescription']
}

export interface NDialogContentProps extends DialogContentProps, BaseExtensions, Pick<NDialogProps, '_dialogOverlay' | '_dialogClose' | 'preventClose' | 'showClose'> {
  onCloseAutoFocus?: (event: any) => void
  onEscapeKeyDown?: (event: KeyboardEvent) => void
  onInteractOutside?: (event: any) => void
  onOpenAutoFocus?: (event: any) => void
  onPointerDownOutside?: (event: any) => void

  una?: NDialogUnaProps['dialogContent']
}

export interface NDialogOverlayProps extends BaseExtensions, Pick<NDialogProps, 'scrollable'> {
  una?: NDialogUnaProps['dialogOverlay']
}

export interface NDialogHeaderProps extends BaseExtensions {
  una?: NDialogUnaProps['dialogHeader']
}

export interface NDialogFooterProps extends BaseExtensions {
  una?: NDialogUnaProps['dialogFooter']
}

export interface NDialogCloseProps extends DialogCloseProps, NButtonProps {
}

export interface NDialogUnaProps {
  dialogTitle?: HTMLAttributes['class']
  dialogDescription?: HTMLAttributes['class']
  dialogHeader?: HTMLAttributes['class']
  dialogFooter?: HTMLAttributes['class']
  dialogOverlay?: HTMLAttributes['class']
  dialogContent?: HTMLAttributes['class']
}

Component

<script setup lang="ts">
import type { NDialogProps } from '../../../types'
import { reactivePick } from '@vueuse/core'
import { DialogRoot, type DialogRootEmits, DialogTrigger, useForwardPropsEmits } from 'radix-vue'
import DialogContent from './DialogContent.vue'
import DialogDescription from './DialogDescription.vue'
import DialogFooter from './DialogFooter.vue'
import DialogHeader from './DialogHeader.vue'
import DialogScrollContent from './DialogScrollContent.vue'
import DialogTitle from './DialogTitle.vue'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<NDialogProps>(), {
  showClose: true,
})
const emits = defineEmits<DialogRootEmits>()

const rootProps = reactivePick(props, [
  'open',
  'defaultOpen',
  'modal',
])

const rootPropsEmits = useForwardPropsEmits(rootProps, emits)
</script>

<template>
  <DialogRoot v-slot="{ open }" v-bind="rootPropsEmits">
    <DialogTrigger as-child>
      <slot name="trigger" :open />
    </DialogTrigger>

    <component
      :is="!scrollable ? DialogContent : DialogScrollContent"
      v-bind="_dialogContent"
      :_dialog-overlay
      :_dialog-close
      :una
      :scrollable
      :show-close
      :prevent-close
      :aria-describedby="props.description ? 'dialog-description' : undefined"
    >
      <slot name="content">
        <DialogHeader
          v-if="props.title || props.description || $slots.header"
          v-bind="_dialogHeader"
          :una
        >
          <slot name="header">
            <DialogTitle
              v-if="props.title"
              v-bind="_dialogTitle"
              :una
            >
              <slot name="title">
                {{ title }}
              </slot>
            </DialogTitle>

            <DialogDescription
              v-if="props.description"
              v-bind="_dialogDescription"
              :una
            >
              <slot name="description">
                {{ description }}
              </slot>
            </DialogDescription>
          </slot>
        </DialogHeader>

        <!-- body -->
        <slot />

        <DialogFooter
          v-if="$slots.footer"
          v-bind="_dialogFooter"
          :una
        >
          <slot name="footer" />
        </DialogFooter>
      </slot>
    </component>
  </DialogRoot>
</template>

Edit this page on GitHub

Components🔴 Datepicker

Components🟢 Dropdown Menu