Dialogs

Dialog content

ConfirmationForm

Usage

Reserve modals for a decision that needs attention. Give it a specific title, a clear exit, and a safe default. Opening moves focus inside; closing restores the source.

Exports / Dialog

Patterns

React

import { useState } from "react";
import { Button, Dialog } from "./folio";

export function DialogExample() {
  const [open, setOpen] = useState(false);
  return <><Button onClick={(e) => { e.currentTarget.focus(); setOpen(true); }}>Review collection</Button>
    <Dialog open={open} onClose={() => setOpen(false)} title="Review collection">
      <p>Everything is ready for the next review.</p>
      <Button onClick={() => setOpen(false)}>Done</Button>
    </Dialog></>;
}