A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
npm install @pittorica/dialog-reactA window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
``bash`
npm install @pittorica/dialog-react
You will also need to install the core pittorica package which contains the CSS, and its dependencies.
`bash`
npm install pittorica @pittorica/box-react @pittorica/heading-react @pittorica/button-react
`jsx
import { useState } from 'react';
import {
Dialog,
DialogActions,
DialogDescription,
DialogTitle,
} from '@pittorica/dialog-react';
import { Button } from '@pittorica/button-react';
import 'pittorica/reset';
import 'pittorica/tokens';
function MyDialog() {
const [open, setOpen] = useState(false);
return (
<>
>
);
}
`
| Prop | Type | Description | Default |
| --------------------- | -------------------------------- | ------------------------------------------------ | ------- |
| open | boolean | If true, the dialog is open. | |onClose
| | () => void | Callback fired when the dialog is closed. | |children
| | React.ReactNode | The content of the dialog. | |className
| | string | Optional class name for the dialog. | |appearance
| | 'light' \| 'dark' \| 'inherit' | The appearance of the dialog. | |closeOnOverlayClick
| | boolean | If true, the dialog closes on overlay click. | true |closeOnEsc
| | boolean | If true, the dialog closes on Esc key press. | true |
The DialogTitle component accepts all props of the Heading component.
The DialogDescription component accepts all props of the Box component.
The DialogActions component accepts all props of the Box` component.