Dialog

The Dialog component is a customizable modal dialog for displaying content overlays.

Examples

Basic Dialog

Preview

Code

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from '@hv/ui/dialog';
import { Button } from '@hv/ui/button';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>
        This is the dialog description.
      </DialogDescription>
    </DialogHeader>
    <p>Dialog body content goes here.</p>
    <DialogFooter>
    </DialogFooter>
    <DialogClose />
  </DialogContent>
</Dialog>

Props

Name	Description	Type
className	Additional classes for styling components	String
asChild	Allows using a child component as the trigger	Boolean
ref	Forwarded reference to the dialog element	React.Ref

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides.