overlay · Normal DOM only

Modal · ConfirmDialog

Centred full-attention surface with backdrop. ConfirmDialog is a thin Modal preset for destructive confirms.

Use Modal for self-contained workflows that block the rest of the UI (creating a record from scratch, irreversible operation confirms). For inline edits use Popover; for non-blocking notifications use Toast.

Inside a Twenty front-component, prefer the bridge import

This Modal · ConfirmDialog is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { Modal } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Modal, ConfirmDialog } from '@8maverik8/twenty-design';

Examples

Modal with header + footer

tsx
<Modal title="Create deal" footer={…}>…</Modal>

ConfirmDialog (destructive)

tsx
<ConfirmDialog title="Delete?" confirmAccent="danger" …/>

Variants

size

sm~300 px — confirm dialogs.

mddefault~400 px — small forms.

lg53% width — multi-field forms.

xl1200 × 800 — editor surfaces.

fullscreen100 dvw — wizard / preview.

Guidelines

✓

Use ConfirmDialog for destructive operations with a danger accent.The two-button pattern (Cancel / Confirm) is already wired — drop in onConfirm and a label.

Chain three modals in a row.Each one steals focus and disorients the user. Inline subsequent steps or use a multi-step wizard inside one modal.