Dialog
A modal dialog with title, description and actions; a click opens it with a spring, a key press opens it instantly.
<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>Props
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/dialog.jsonThe CLI writes components/ikada/dialog.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogFooter } from "@sproutboat/ikada";
Usage
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
<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><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
| 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. |
Also takes every prop of Omit<ComponentProps<typeof BaseDialog.Popup>, "className">.
| 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. |
| 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: src/components/dialog.tsx