Overlays
Modals, notification toasts, and slide-over panels.
Overlay ยท 24 variants
How To Use This Page
Overlays sits inside the Application UI part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 14 examples so you can compare structure, emphasis, and density before choosing an implementation direction.
How The Content Is Grouped
- The examples are grouped as a single Application UI reference page so you can compare variations without leaving the route.
- Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.
Start With
Simple Alert
A centered confirmation alert with primary and secondary actions.
Simple With Dismiss Button
A concise information modal with a direct exit affordance.
With Taupe Footer
A conventional modal body with actions anchored in a separated footer.
Centered With Single Action
Success confirmation with one clear completion button.
Centered With Wide Buttons
Stacked actions for mobile-friendly confirmation flows.
Simple
A minimal toast with text and an inline dismiss button.
With Avatar
Identity-led toast content for collaboration events.
With Actions Below
Useful when a toast needs a clear follow-up action.
Modals
Simple Alert
A centered confirmation alert with primary and secondary actions.
Deactivate account
Deactivating this account will remove access to all shared workspaces and billing tools.
Workspace updated
Everyone on the project has access to the new navigation structure and revised permissions.
Move selected files?
These files will be transferred into the archive folder and hidden from the active release queue.
Centered With Single Action
Success confirmation with one clear completion button.
Payment successful
Your annual plan is active and the new invoice has been emailed to finance.
Delete workspace
This permanently removes files, comments, and member access across the entire workspace.
Notifications
Simple
A minimal toast with text and an inline dismiss button.
Changes saved
Your dashboard filters were updated and synced across your team workspace.
With Avatar
Identity-led toast content for collaboration events.
Courtney Henry left feedback on the hero treatment.
With Actions Below
Useful when a toast needs a clear follow-up action.
New reply from Eduardo
The client approved the revised rollout date and asked for an updated status recap.
Condensed
A dense, single-line notification for low-priority updates.
Invoice sent to finance
now
Review request
Tom Cook requested sign-off on the new navigation copy before 3 PM.
Slide-Overs
Empty
A clean side panel for empty states or first-run guidance.
Recent activity
Nothing here yet
New comments, edits, and status changes will appear here as your team works.
With Branded Header
A more opinionated panel for high-visibility workflows.
Launch checklist
Final review items for the homepage release scheduled this afternoon.
In progress
- Confirm QA sign-off across desktop and tablet breakpoints.
- Publish updated legal copy in the checkout footer.
- Schedule a rollback window with support coverage.
User Profile
A profile summary with contact details and a single edit action.
Profile
Lindsay Walton
Front-end Developer
Engineeringlindsay.walton@example.com
Phone
+1 (555) 123-4300
Location
San Francisco, CA
Create Project Form
A form-heavy panel with controlled inputs and team selection.
Create project
Team members
2 selected