Usage

Hook for showing a dialog without managing open state. Call dialog.show(content, options) to open and dialog.hide() to close. Render dialog.Host once in your template.

import { useImperativeDialog } from '@astryx-vue/core/Dialog'

<script setup lang="ts">
import { DialogHeader, useImperativeDialog } from '@astryx-vue/core/Dialog'
import { h } from 'vue'

const dialog = useImperativeDialog({ width: 400 })
const DialogHost = dialog.Host

function askToDelete(): void {
  dialog.show(
    () => h(DialogHeader, { title: 'Delete project?', hasCloseButton: true }),
    { purpose: 'form' },
  )
}
</script>

<template>
  <button type="button" @click="askToDelete">
    Delete project
  </button>
  <DialogHost />
</template>

Examples

Common configurations, variations, and states.

Dialog — Confirmation

Delete project?

This will permanently delete "Marketing Dashboard" and all of its data. This action cannot be undone.

Asks the user to confirm a destructive action before it happens. Use before deleting projects, removing team members, revoking API keys, or any irreversible operation.

Dialog — Form

Edit profile

Update your display name and bio

Display name

Bio

Design systems engineer

Collects user input without navigating away from the page. Uses purpose form so clicking the backdrop won't close it. Use for editing profiles, creating items, or updating settings inline.

Dialog — Required

Transfer project ownership

This action requires confirmation from the new owner

You are about to transfer "Marketing Dashboard" to Sarah Chen. Once accepted, you will lose admin access.

Cannot be dismissed by Escape or backdrop click; the user must explicitly choose an action. Uses purpose required. Use for ownership transfers, legal acknowledgements, or critical decisions where skipping is not an option.

Dialog — Scrollable

Terms and Conditions

1. You agree to use the service only for lawful purposes and in compliance with all applicable laws and regulations in your jurisdiction.2. Your account credentials are your responsibility. Notify us immediately if you suspect unauthorized access to your account.3. We reserve the right to suspend accounts that violate these terms or engage in abusive behavior toward other users.4. Content you upload remains your property. You grant us a license to host and display it within the service.5. We may update these terms at any time. Continued use after changes constitutes acceptance of the updated terms.6. The service is provided as-is without warranties of any kind. We are not liable for data loss or service interruptions.7. You may cancel your account at any time. Your data will be deleted within 30 days of cancellation.8. Disputes will be resolved through binding arbitration in accordance with applicable regulations.9. You agree not to reverse-engineer, decompile, or disassemble any part of the service or its underlying technology.10. We may collect anonymized usage data to improve the service. Personal data is handled per our Privacy Policy.11. Third-party integrations are governed by their own terms. We are not responsible for third-party service outages.12. You are responsible for maintaining backups of your data. We provide export tools but do not guarantee data recovery.13. Commercial use requires a Business plan. Free accounts are limited to personal and non-commercial projects.14. We may introduce new features or discontinue existing ones with 30 days notice via email or in-app notification.15. Violation of these terms may result in immediate termination of your account without prior notice or refund.

Constrains the dialog height and scrolls the body when content overflows. Use for terms and conditions, license agreements, changelogs, or any long-form content the user needs to review before accepting.