Modal interaction screen examples

Cushion

Content editor modal where the user is writing a draft with a table, currently in a loading state while saving or submitting.

• Edit
• Loading

Rayon

Design editor where the user is modifying the stroke style of a selected shape on a 2D floor plan canvas.

• Design Editor
• Edit

Secfi

Drawer where the user submits their equity details, including share amount, price, and intent, to start the secondary sale process.

• Add & Create

Macaw

Settings page where the user manages target audience segments, descriptions, product benefits, and key terminology for AI content generation.

• Settings

Kajabi

Settings page where the user edits their payment method and business address via a modal overlay.

• Billing Settings
• Payment Form

Instant

Settings modal where the user enters a new email address to receive a verification link.

• Profile
• Edit

Sprig

Modal where the user selects an existing manual group to add selected users to, or creates a new group.

• Select
• Table

Jimo

Settings page where the user updates their account password via a modal dialog.

• Account Settings
• Profile

Langdock

Onboarding step where the user provides their company name, size, and country to start a free trial.

• Account Setup

Hashnode

Settings page where the user configures the header navigation for their documentation site via a side drawer to add a new navbar item.

• Edit
• Settings

Campsite

Feed view where the user configures default channel settings and adds existing organization members via a creation modal.

• Invite Teammates
• Team Management

Tines

Search overlay where the user types to find quick actions like importing a story file.

• Command Palette
• Search