Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Standard Dialog for Vue

A share dialog with the read-only link https://example.com/share/abc123, a Copy button beside it, and Close.

UI library: Ark UI

Open Dialog shows Share this link. A read-only field holds https://example.com/share/abc123, with Copy beside it. Close sits under the field.

Use it to hand someone a link without leaving the page. Copy does not write to the clipboard until you add that. A share tied to one button can be a Popover. In Vue, Ark UI does not copy the link.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Dialog anatomy: content, title, description, close, footer

Usage

<Dialog>
  <DialogTrigger :asChild="true">
    <Button variant="outline">Open Dialog</Button>
  </DialogTrigger>
  <DialogContent class="sm:max-w-md">
    <DialogHeader>
      <DialogTitle>Share this link</DialogTitle>
      <DialogDescription>
        Anyone who has this link will be able to view this document.
      </DialogDescription>
    </DialogHeader>
    <div class="flex items-center gap-2">
      <Input
        aria-label="Link"
        class="flex-1"
        :readOnly="true"
        type="text"
        :value="shareLink"
      />
      <Button size="sm">Copy</Button>
    </div>
    <DialogFooter class="sm:justify-start">
      <DialogClose :asChild="true">
        <Button variant="secondary">Close</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

FAQ

How can people close it?

With Close, which is a DialogClose, the X in the corner, Escape, or a click outside.

How does focus work?

Focus moves into the dialog when it opens, stays inside while it's open, and returns to the trigger when it closes.

Can I stop a click outside from closing it?

Yes, for forms with unsaved changes. Set closeOnInteractOutside to false on Dialog. Keep Escape and the close button working.

How do I make Copy work?

Copy the link to the clipboard on click and confirm it. The Clipboard component does this with a built-in indicator.

Can a dialog open another dialog?

It can, but avoid it: a second modal on top is confusing. Change the dialog's content instead, or use a Sheet.

How does it look on mobile?

On small screens it sits at the bottom of the screen at full width, like a sheet; from sm up it's centered and capped at sm:max-w-md. Set bottomStickOnMobile to false to keep it centered everywhere.

API Reference

Dialog

Sets asChild. The rest is on the Dialog page.

Button

Sets variant="outline", size="sm" and variant="secondary". The rest is on the Button page.

Input

Sets aria-label="Link", readOnly, type="text" and value="shareLink". The rest is on the Input page.

All 17 dialog examples