Dialog

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

Installation

Install the package


npm install @abbyyproduct/ui

Import the component


import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@abbyyproduct/ui/components/dialog';

Use the component


<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Usage


import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@abbyyproduct/ui/components/dialog';


<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Examples

Custom close button

Changelog

2024-12-27 Example

This is an example of a changelog entry.

MyApp.tsx


import React from 'react';
 
function MyApp() {
  return <div>My App</div>;
}
 
export default MyApp;