Dialog · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JDialog } from '@juxtui/ui'

Usage #

<JButton @click="open = true">Edit profile</JButton>

<JDialog v-model:open="open" title="Edit profile" description="Changes are visible to your team.">
  <JInput v-model="name" label="Name" />
  <template #footer="{ close }">
    <JButton variant="ghost" @click="close">Cancel</JButton>
    <JButton @click="save">Save</JButton>
  </template>
</JDialog>

On screens narrower than 640px the dialog becomes a sheet anchored to the bottom edge, within reach of a thumb. Footer actions stack full-width.

Variants & examples #

Destructive confirmation#

For irreversible actions, say exactly what will happen and name the consequence on the button.

<script setup lang="ts">
const open = ref(false)
const deleting = ref(false)

async function remove() {
  deleting.value = true
  await new Promise(resolve => setTimeout(resolve, 1200))
  deleting.value = false
  open.value = false
  toast('Project deleted', { description: 'juxt-marketing and 14 deployments were removed.' })
}
</script>

<template>
  <JButton variant="destructive" @click="open = true">Delete project</JButton>

  <JDialog
    v-model:open="open"
    size="sm"
    title="Delete juxt-marketing?"
    description="This permanently removes the project, its 14 deployments and all environment variables. This can’t be undone."
  >
    <template #footer="{ close }">
      <JButton variant="ghost" @click="close">Keep project</JButton>
      <JButton variant="destructive" :loading="deleting" @click="remove">Delete project</JButton>
    </template>
  </JDialog>
</template>

Required decision#

With close-on-overlay and close-on-escape off, dismissal attempts get a small nudge instead.

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <JButton variant="outline" @click="open = true">Review changes</JButton>

  <JDialog
    v-model:open="open"
    title="Unsaved changes"
    description="You have edits that haven’t been published. Try pressing Escape or clicking outside."
    :close-on-overlay="false"
    :close-on-escape="false"
    hide-close
  >
    <template #footer="{ close }">
      <JButton variant="ghost" @click="close">Discard</JButton>
      <JButton @click="close">Publish</JButton>
    </template>
  </JDialog>
</template>

API #

Props

Prop	Type	Default	Description
open	`boolean`	`false`	Bound with `v-model:open`.
title	`string`	—	Heading. Labels the dialog.
description	`string`	—	Supporting text. Describes the dialog.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Maximum width: 400, 480 or 640px.
closeOnOverlay	`boolean`	`true`	Close when the backdrop is clicked.
closeOnEscape	`boolean`	`true`	Close when Escape is pressed.
hideClose	`boolean`	`false`	Hide the close button in the corner.
ariaLabel	`string`	—	Accessible name when there is no visible title.

Events

Event	Payload	Description
update:open	`boolean`	Emitted when the dialog asks to close.
afterClose	—	After the leave transition — a good moment to reset form state.

Slots

Slot	Props	Description
default	`{ close }`	Body content.
footer	`{ close }`	Actions, right-aligned.
header	`{ titleId, descriptionId }`	Replace the header. Put `titleId` on your heading to keep the dialog labelled.

Accessibility #

role="dialog" with aria-modal, labelled by the title and described by the description.
On open, focus moves to an element marked autofocus, else the first form field, else the dialog itself — never to a random button.
On close, focus returns to whatever opened the dialog.
Dialogs stack: Escape and outside clicks only affect the top-most layer, so a select open inside a dialog closes first.
A click only dismisses when it both starts and ends on the backdrop — dragging a text selection out of the dialog never closes it.

Keyboard #

Key	Action
`Tab`	Moves focus to the next element inside the dialog, wrapping at the end.
`ShiftTab`	Moves focus backwards, wrapping at the start.
`Esc`	Closes the dialog (unless `close-on-escape` is off).