About this block

Invite Members Dialog sends people to the Acme workspace. The Textarea arrives pre-filled with two addresses, maya@northwind.io and omar@northwind.io, and the hint beneath it explains the comma-separated format, up to 10 per batch. The role Select defaults to Member with one plain line below it: Members can create projects and deploy, but cannot manage billing or invite others. A muted callout then states the seat consequence before send: these 2 invites use your last 2 seats on the Growth plan, with the per-seat cost and proration spelled out.

Roles are one array feeding the closed Select. The callout surfaces billing reality before the button, which is the line that stops the surprised invoice support ticket.

When to use

Reach for this block on the workspace members page or inside any context where the user needs to add colleagues. Wire the Textarea to parse email addresses, the Select to your role model, the callout to your billing API seat count, and Send to your invite endpoint.

A natural flow around it on an Application Pro page:

Before

• Users table

After

• Billing page
• Settings page

What you can display

One strong use is the standard workspace invite flow. Other invite dialogs:

• Project invite. Scope the role line to project permissions, viewer, contributor, reviewer.
• Guest invite. A single email field, a fixed viewer-only role, and an expiry date for the link.
• Bulk import. Replace the Textarea with a CSV upload row that counts detected emails before send.

Tip: show the seat math before the send button, not after, that is the only place it changes behavior.