Modal

A modal dialog with title, description, body and footer.

ModalProps packages/core/src/components/modal.ts:20 ↗

Import

import { Modal } from "@tarve/core";

Usage

Modal.tsx

import { Button, Input, Modal, Row } from "@tarve/core";

let open = true;

<Modal
  open={open}
  title="Rename file"
  description="Choose a new name for this file."
  onOpenChange={(next) => {
    open = next;
  }}
  footer={
    <Row gap={8} justify="end">
      <Button variant="outline" onClick={() => (open = false)}>Cancel</Button>
      <Button onClick={() => (open = false)}>Save</Button>
    </Row>
  }
>
  <Input value="notes.md" />
</Modal>

Props

Prop	Type	Default
`open` required	`boolean`	—
`closeOnEscape`	`boolean`	`true`
`closeOnOverlay`	`boolean`	`true`
`description`	`string`	—
`footer`	`Child`	—
`onOpenChange`	`(open: boolean) => void`	—
`showClose`	`boolean`	`true`
`title`	`string`	—
`width`	`number`	`480`

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle