dialog-close-button

PreviousNext
Docs
takiexample

Preview

Loading preview…
registry/new-york/examples/dialog-close-button.tsx
import { Button } from "@/registry/new-york/ui/button"
import {
  Dialog,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/registry/new-york/ui/dialog"
import { Input } from "@/registry/new-york/ui/input"
import { Label } from "@/registry/new-york/ui/label"
import { Modal } from "@/registry/new-york/ui/modal"

export default function DialogCloseButton() {
  return (
    <DialogTrigger>
      <Button variant="outline">Share</Button>
      <Modal>
        <Dialog className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Share link</DialogTitle>
            <DialogDescription>
              Anyone who has this link will be able to view this.
            </DialogDescription>
          </DialogHeader>
          <div className="flex items-center gap-2">
            <div className="grid flex-1 gap-2">
              <Label htmlFor="link" className="sr-only">
                Link
              </Label>
              <Input
                id="link"
                defaultValue="https://ui.shadcn.com/docs/installation"
                readOnly
              />
            </div>
          </div>
          <div className="flex justify-start pt-4">
            <Button type="button" variant="secondary" slot="close">
              Close
            </Button>
          </div>
        </Dialog>
      </Modal>
    </DialogTrigger>
  )
}

Installation

npx shadcn@latest add @taki/dialog-close-button

Usage

import { DialogCloseButton } from "@/components/dialog-close-button"
<DialogCloseButton />