Dialog

overlays

A window overlaid on either the primary window, rendering the content underneath inert.

Preview

Installation

npm install @launchapp/design-system

Import

import {  DialogRoot, DialogTrigger, DialogContent,  DialogHeader, DialogFooter, DialogTitle, DialogDescription} from "@launchapp/design-system";

Examples

Basic Dialog

<DialogRoot>  <DialogTrigger asChild>    <Button variant="outline">Open Dialog</Button>  </DialogTrigger>  <DialogContent className="sm:max-w-[425px]">    <DialogHeader>      <DialogTitle>Edit profile</DialogTitle>      <DialogDescription>        Make changes to your profile here.      </DialogDescription>    </DialogHeader>    <div className="grid gap-4 py-4">      <Input placeholder="Name" />    </div>    <DialogFooter>      <Button type="submit">Save changes</Button>    </DialogFooter>  </DialogContent></DialogRoot>

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.
`defaultOpen`	`boolean`	`false`	Initial open state.

← PreviousDatePicker

Next →DropdownMenu