Modals

Modals

Guidelines

Modals display messaging and other content in a layer above the app.

Modals header

Introduction

Modals display content in a layer above the app. They’re used for messaging, setup, and for viewing or editing additional details of the currently selected component or record.

Start using our Design Kits

Open in Figma

Usage

A builder can include both modals and panels. In general, panels are preferred over modals, though each has its uses. Use this decision matrix to guide your choices.

When to Use Panels or Modals

TypeProsCons
Panel
  • Small and medium panels maintain the context of the builder beneath them.
  • Full panels allow greater focus when viewing a single element—ideal for emails and other large visual elements.
  • Can partially or completely obscure the canvas.
  • Doesn't require Save or Cancel actions, which can result in confusion.
Modal
  • Maintain trust with explicit Save, Cancel, and similar actions.
  • Have greater versatility; can appear in any context.
  • Provide focus in any context by obscuring anything below the modal.
  • Obscures canvas completely.
  • Difficult to cross-reference other elements on canvas and tool palette.

See how modals can be used for specific use cases in Content Builders

Next: Nodes