Skip to main contentSkip to sidebarSkip to headerSkip to footer

Dialog

A window overlaid on the primary content, requiring user interaction.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
3
4
5
6
7
8
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogTrigger,
} from "passport-ui";
import { Button } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent className="w-sm">
    <div className="meta-container">
      <h3>Account Settings</h3>
      <p>Manage your account settings and preferences here.</p>
    </div>
    <Separator />
    <div className="meta-container">
      <h3>Profile Information</h3>
      <p>Update your personal details and contact information</p>
    </div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DialogClose>
      <Button>Save Changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗