Child pages
  • Modals
Skip to end of metadata
Go to start of metadata

Modals should always respect the following structure:

— header — it wraps the title, the close button and a brief description on what’s being done or showed through its body content.

— body — the main content of the modal; it will usually show forms and tables so the user can confirm some action relative to what he’ve selected before. Alerts with feedback on the user’s actions should be the first element on the “modal-content” section.

— footer — where you place the buttons to done/save/submit/values filled or cancel the modal; the first one should always be the primary action, and it’s pulled to the modal footer’s right corner ; cancel or secondary actions related to the filled or read data should be on the left side of the primary button.

  • No labels