Dialog

Built on Radix Dialog: focus is trapped, Escape closes, and the page behind recedes with the depth effect. Turn dismissible off for decisions that must be answered.

import { useState } from 'react';
import {
  Button,
  DialogContent,
  DialogRoot,
  Input,
} from '@andrewbehma/glass-ui';

Playground

Dialog.tsx

import { useState } from 'react';
import {
  Button,
  DialogContent,
  DialogRoot,
  Input,
} from '@andrewbehma/glass-ui';

function Example() {
  const [open, setOpen] = useState(false);
  return (
    <DialogRoot open={open} onOpenChange={setOpen}>
      <Button variant="danger" onClick={() => setOpen(true)}>
        Delete project
      </Button>
      <DialogContent
        title="Delete this project?"
        description="Boards, files and history are removed for everyone. This cannot be undone."
        footer={
          <>
            <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
            <Button variant="danger" onClick={() => setOpen(false)}>Delete</Button>
          </>
        }
      >
        <p className="text-body text-ink-2">Type the project name to confirm.</p>
        <Input className="mt-3" tone="on-glass" placeholder="northwind" />
      </DialogContent>
    </DialogRoot>
  );
}