Modal component · Kition Tessera

When to use

Confirming details or collecting a few values in an app (rename, share, create).

When not to

A kit tool’s settings: use Dialog.
Editing beside the work: use Sheet.

Examples

Rename

modal.tsx

import { useState } from 'react'
import { Button, Field, Modal, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, TextInput } from '@kition/tessera-ui'

export default function Demo() {
  const [open, setOpen] = useState(false)
  const [name, setName] = useState('Quarterly plan')
  return (
    <>
      <Button variant="secondary" size="md" onClick={() => setOpen(true)}>Rename…</Button>
      <Modal open={open} onOpenChange={setOpen}>
        <ModalContent size="sm">
          <ModalHeader>
            <ModalTitle>Rename document</ModalTitle>
            <ModalDescription>The name shows in the tab and the file tree.</ModalDescription>
          </ModalHeader>
          <Field label="Name">{({ id }) => <TextInput id={id} size="lg" value={name} onChange={(event) => setName(event.target.value)} />}</Field>
          <ModalFooter>
            <Button variant="secondary" size="md" onClick={() => setOpen(false)}>Cancel</Button>
            <Button variant="primary" size="md" onClick={() => setOpen(false)}>Rename</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}

A long dialog

With `fixed` the header and footer stay put and ModalBody scrolls; a ModalCloseButton of your own can be disabled while work runs.

modal-fixed.tsx

import { useState } from 'react'
import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle } from '@kition/tessera-ui'

export default function Demo() {
  const [open, setOpen] = useState(false)
  const [running, setRunning] = useState(false)
  return (
    <>
      <Button variant="secondary" size="md" onClick={() => setOpen(true)}>Import file…</Button>
      <Modal open={open} onOpenChange={(next) => (running ? undefined : setOpen(next))}>
        <ModalContent size="xl" fixed hideClose>
          <ModalHeader>
            <ModalTitle>Import a file</ModalTitle>
          </ModalHeader>
          <ModalBody>
            {Array.from({ length: 24 }, (_, i) => (
              <p key={i} style={{ margin: 0, fontSize: 14 }}>Column {i + 1}: text</p>
            ))}
          </ModalBody>
          <ModalFooter>
            <Button variant="ghost" size="md" disabled={running} onClick={() => setOpen(false)}>Cancel</Button>
            <Button
              variant="primary"
              size="md"
              loading={running}
              onClick={() => {
                setRunning(true)
                setTimeout(() => {
                  setRunning(false)
                  setOpen(false)
                }, 1200)
              }}
            >
              Import
            </Button>
          </ModalFooter>
          <ModalCloseButton disabled={running} />
        </ModalContent>
      </Modal>
    </>
  )
}