Modal

Dialog surface for focused tasks that require temporary context isolation.

Invite member

Modal body content
  • .source-modal Native dialog root
  • .source-modal-header Header row with title and close action
  • .source-modal-close Close control button
  • .source-modal-body Scrollable content section
  • .source-modal-footer Optional action row

Sizes

SizeMax widthWhen to use
sm400pxConfirmations, short prompts with one or two actions.
md560pxDefault. Short forms, invite flows, settings dialogs.
lg800pxDetail views, multi-step flows, content previews.
full100vwMobile-first full-screen sheets. Avoid on desktop.

Structure variants

SlotNotes
modal-headerTitle + close button. Always present — omitting it leaves users without a clear exit path.
modal-bodyScrollable content area. Grows up to the viewport height before scrolling.
modal-footerOptional. Use for primary/secondary action pairs. Right-align actions.