Modals and dialogs

84 components, 84 with React code

Create, confirm, connect and destroy flows as finished modals: add funds, invite teammates, connect Stripe, pause an automation, run a scan. Copy that names the object, not “Are you sure?”.

Create and edit flowsDestructive confirmationsConnect-an-integration steps

DialogLoopoCodeFree
Add funds modal component preview
Add funds modalLoopoCodeFree
Add contacts modal component preview
Add contacts modalLoopoCodeFree
New campaign modal component preview
New campaign modalLoopoCodeFree
Template picker modal component preview
Pause flow modal component preview
Pause flow modalLoopoCodeFree
Save view modal component preview
Save view modalLoopoCodeFree
Import contacts modal component preview
Segment builder modal component preview
Segment builder modal, New segment component preview
Embed code modal component preview
Embed code modalLoopoCodeFree
Connect PayPal modal component preview
Schedule report modal component preview
Create payment link modal component preview
Invite members modal component preview
Register agent modal component preview
What happens modal component preview
What happens modalAutonCode Pro
Simulation · v8 draft modal component preview
Turn off modal component preview
Turn off modalAutonCode Pro
Policy templates modal component preview
Issue credential modal component preview
Credential issued modal component preview
Deny this request? modal component preview
Export audit events modal component preview
Browse and filter all 84

Every modals and dialogs component, by system

Questions

When should I use a modal instead of a drawer?

Use a modal for a decision that blocks the task (confirm, create, destroy). Use a drawer to inspect or edit a record while keeping the list in view.

Are the modals accessible?

Interactive parts use Base UI, which handles focus trapping, escape to close and ARIA roles.

Guides