Dialog

1import { Button, Dialog, Field, Input } from "@hyzrui/core";
2 
3export function DialogForm() {
4  return (
5    <Dialog
6      trigger={<Button variant="outline">Invite member</Button>}
7      title="Invite team member"
8      description="They will receive an email with a link to join your workspace."
9      actions={
10        <>
11          <Button variant="outline">Cancel</Button>
12          <Button>Send invite</Button>
13        </>
14      }
15    >
16      <div style={{ display: "grid", gap: 12 }}>
17        <Field label="Email address">
18          <Input placeholder="colleague@company.com" />
19        </Field>
20        <Field label="Role">
21          <Input defaultValue="Editor" />
22        </Field>
23      </div>
24    </Dialog>
25  );
26}

1import { Button, Dialog } from "@hyzrui/core";
2 
3export function DialogDestructive() {
4  return (
5    <Dialog
6      trigger={<Button tone="danger" variant="outline">Delete project</Button>}
7      title="Delete project?"
8      description="This project and all its data will be permanently removed. This action cannot be undone."
9      actions={
10        <>
11          <Button variant="outline">Cancel</Button>
12          <Button tone="danger">Delete project</Button>
13        </>
14      }
15    >
16      <p style={{ fontSize: "0.875rem", color: "var(--hui-muted)" }}>
17        All 14 components, 3 releases, and activity history will be deleted.
18      </p>
19    </Dialog>
20  );
21}