# Dialog

A modal dialog with title, description and actions; a click opens it with a spring, a key press opens it instantly.

Source page: https://sproutboat.com/ikada/components/dialog

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/dialog.json
```
Or from the package: `import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogFooter } from "@sproutboat/ikada";`
## Usage
```tsx
import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogFooter } from "@/components/ikada/dialog";

<Dialog>
  <DialogTrigger render={<Button>Open dialog</Button>} />
  <DialogContent>
    <DialogTitle>Delete robin?</DialogTitle>
    <DialogDescription>This cannot be undone.</DialogDescription>
    <DialogFooter>
      <DialogClose render={<Button>Cancel</Button>} />
      <DialogClose render={<Button variant="primary">Confirm</Button>} />
    </DialogFooter>
  </DialogContent>
</Dialog>
```
## Examples
### Confirm
Opens with a click on a spring from the centre; opened with a key it appears at once. Escape or Cancel closes.
```tsx
<Dialog>
  <DialogTrigger render={<Button variant="danger">Delete robin</Button>} />
  <DialogContent>
    <DialogTitle>Delete robin?</DialogTitle>
    <DialogDescription>
      robin.sproutboat.app stops serving traffic and its eu-west data is removed.
      This cannot be undone.
    </DialogDescription>
    <DialogFooter>
      <DialogClose render={<Button>Cancel</Button>} />
      <DialogClose render={<Button variant="danger">Delete</Button>} />
    </DialogFooter>
  </DialogContent>
</Dialog>
```
### Without the corner close
When the footer already has Cancel, hideClose drops the X.
```tsx
<Dialog>
  <DialogTrigger render={<Button>Move to us-east</Button>} />
  <DialogContent hideClose>
    <DialogTitle>Move wren to us-east?</DialogTitle>
    <DialogDescription>
      Traffic shifts once the new region passes its health check.
    </DialogDescription>
    <DialogFooter>
      <DialogClose render={<Button>Cancel</Button>} />
      <DialogClose render={<Button variant="primary">Move</Button>} />
    </DialogFooter>
  </DialogContent>
</Dialog>
```
## Props
### DialogContentProps
Also takes every prop of `Omit<ComponentProps<typeof BaseDialog.Popup>, "className">`.
| Prop | Type | Description |
| --- | --- | --- |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
| hideClose? | `boolean` | Hide the corner close button when the footer already has Cancel. Default `false`. |
| style? | `CSSProperties \| ((state: DialogPopupState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogPopupState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### DialogTitleProps

| Prop | Type | Description |
| --- | --- | --- |
| style? | `CSSProperties \| ((state: DialogTitleState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogTitleState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
### DialogDescriptionProps

| Prop | Type | Description |
| --- | --- | --- |
| style? | `CSSProperties \| ((state: DialogDescriptionState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogDescriptionState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/dialog.tsx