Overlays & Tooltips

Invite Dialog

Ergonomic Dialog for inviting a member by email and role.

Import

tsx

import { InviteDialog } from "@cronus-ui/ui";

bash

npx cronus-ui add invite-dialog

Examples

Basic

An ergonomic Dialog for inviting a member by email and role. Pass a `trigger`; default roles are Member and Admin. `labels` overrides the English strings.

tsx

<InviteDialog trigger={<Button>Invite member</Button>} />

Async invite

When `onInvite` returns a promise the send button shows a spinner and both actions lock until it settles — the dialog can’t be dismissed mid-flight. On reject it stays open and surfaces the error inline; on resolve it closes, unless the result is `{ url }` (copyable invite link).

Send to see the pending spinner — the first attempt fails inline, the retry succeeds.

tsx

function InviteDialogAsyncDemo() {
  const [open, setOpen] = useState(false);
  const attemptRef = useRef(0);
  const [invited, setInvited] = useState(false);

  return (
    <div className="flex flex-col items-center gap-3">
      <InviteDialog
        open={open}
        onOpenChange={(next) => {
          if (next) {
            attemptRef.current = 0;
            setInvited(false);
          }
          setOpen(next);
        }}
        trigger={<Button>Invite member</Button>}
        onInvite={async () => {
          attemptRef.current += 1;
          await new Promise((resolve) => {
            window.setTimeout(resolve, 1400);
          });
          if (attemptRef.current === 1) {
            throw new Error("Couldn’t reach the server. Check your connection and try again.");
          }
          setInvited(true);
        }}
      />
      <p className="text-xs text-fg-tertiary">
        {invited
          ? "Invite sent."
          : "Send to see the pending spinner — the first attempt fails inline, the retry succeeds."}
      </p>
    </div>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component InviteDialogDefault layout:inline style:invite-dialog {
  label "Invite member"
}

page "/audit/invite-dialog/default" type:custom {
  use InviteDialogDefault
}

API Reference

Generated from the component's exported types.

InviteDialogLabels

Prop	Type	Default	Description
`title`	`string`	—	—
`description`	`string`	—	—
`email`	`string`	—	—
`emailPlaceholder`	`string`	—	—
`role`	`string`	—	—
`send`	`string`	—	—
`cancel`	`string`	—	—
`sending`	`string`	—	—
`errorFallback`	`string`	—	—
`sentTitle`	`string`	—	—
`sentDescription`	`string`	—	—
`link`	`string`	—	—
`copy`	`string`	—	—
`copied`	`string`	—	—
`done`	`string`	—	—

InviteDialogProps

Extends Omit<ComponentPropsWithoutRef<typeof DialogContent>, "title" | "children" | "labels">

Prop	Type	Default	Description
`trigger`	`ReactNode`	—	Element that opens the dialog. Rendered inside a `DialogTrigger asChild`. Omit when driving the dialog purely via `open`.
`open`	`boolean`	—	Controlled open state. Provide alongside `onOpenChange` to control the dialog externally.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called whenever the open state changes. Dismissal is suppressed while an invite promise is pending.
`roles`	`readonly InviteRole[]`	—	Roles offered in the select. Defaults to Member and Admin.
`defaultRole`	`string`	—	Initially selected role `value`. Falls back to the first role.
`onInvite`	`(payload: { email: string; role: string }) => InviteHandlerReturn`	—	Invoked with the submitted email and role. If it returns a promise, the send button shows a spinner and actions are disabled until it settles. On reject the dialog stays open and surfaces the error. On resolve: a `{ url }` keeps the dialog open with a copyable link; otherwise the dialog closes.
`labels`	`InviteDialogLabels`	—	Override any subset of the built-in English strings.
`ref`	`Ref<HTMLDivElement>`	—	Forwarded to the dialog content surface.
`asChild`	`boolean`	—	Render as the child element via Slot.
`className`	`string`	—	Additional class names merged onto the root.