Basic Modals
Standard modal dialogs for user interactions
Standard Sizes
Modal Types
Banded Modals · v2.7.0
is_banded emits pa-modal--banded alongside the role variant. Both header AND footer get filled bands using the alert tokens (15% role-mix in light mode, 45% in dark). Buttons inside the bands auto-invert via --pa-text-color-1 for cross-theme contrast.
Position Modifiers
Behavior Modifiers
Form Modals
Modals containing forms and interactive content
Confirmation Modals
Action confirmation and decision dialogs
Small Modal
This is a small modal dialog. Perfect for quick notifications or simple confirmations.
Medium Modal
This is a medium-sized modal dialog. Great for forms and detailed content.
You can include multiple paragraphs, lists, and other content here.
- Feature 1
- Feature 2
- Feature 3
Large Modal
Column 1
Large modals are perfect for complex content layouts with multiple columns.
You can use the PureCSS grid system inside modals to create sophisticated layouts.
Column 2
This second column demonstrates how you can organize content in larger modal dialogs.
Extra Large Modal
Column 1
Extra large modals provide ample space for comprehensive content displays.
Perfect for data tables, reports, and detailed analytics dashboards.
Column 2
You can display complex data structures, charts, and visualizations.
Column 3
Three-column layouts work beautifully in extra large modals.
Ideal for comparison views and side-by-side content.
XXL Modal - Maximum Size
Section 1
XXL modals are the largest available size at 90rem (1440px) wide.
Perfect for full-featured application interfaces within a modal.
Section 2
Ideal for complex workflows that require maximum screen real estate.
Section 3
Four-column layouts provide exceptional flexibility for content organization.
- Dashboard views
- Complex forms
- Data comparisons
Section 4
On smaller screens, these columns will stack responsively.
Full Width Content Area
You can also use the full width for single-column content when needed. This is particularly useful for wide tables, code editors, or visual design tools.
Nested cards and components work seamlessly within XXL modals, allowing you to create rich, interactive interfaces.
Full Width Modal - Maximum Screen Coverage
Navigation
- Dashboard
- Analytics
- Reports
- Settings
Main Content Area
Full-width modals are perfect for complex applications that need to run within a modal context. Examples include:
- Code Editors: Full IDE-like experiences
- Design Tools: Canvas-based applications
- Data Analysis: Large spreadsheets or pivot tables
- Media Galleries: Full-screen photo/video management
- Document Viewers: PDF readers, document editors
Properties
✓ Success!
Your action has been completed successfully!
⚠ Warning
Please review your action before proceeding.
🔥 Danger Zone
This action is potentially destructive.
Centered Modal (Default)
This is the default modal behavior - centered vertically and horizontally in the viewport.
This works well for most use cases where you want the modal to be the focal point.
Top-Aligned Modal
This modal uses the pa-modal--top modifier to position it near the top of the viewport.
This is useful for:
- Search interfaces (similar to command palette)
- Quick actions that don't need full attention
- Modals that might contain tall content
- Better visual flow when content extends below fold
Static Modal
This modal cannot be closed by:
- Pressing the Escape key
- Clicking the backdrop
You must click a button below to close this modal.
Contact Us
Sign In
Settings
General Settings
Privacy Settings
Confirm Delete
Are you sure you want to delete this item?
Confirm Action
Do you want to proceed with this action?
This will update your preferences and may affect other users.
Information
Here's some important information you should know:
- Feature access will be limited after expiration
- Your data will remain safe for 30 days
- You can renew at any time
✓ Backup completed
All 2.4 GB of data has been backed up successfully. The archive is available in your cloud storage.
Buttons inside the header and footer auto-invert (--pa-text-color-1) for cross-theme contrast — light theme renders dark-on-pale, dark theme renders light-on-muted.
⚠ Storage almost full
You're using 92% of your 100 GB quota. Consider upgrading or archiving older files.
🔥 Permanent deletion
This will permanently delete 14 projects and 1,283 files. The action cannot be undone.
New feature available
Banded modals shipped in pure-admin v2.7.0. Combine the existing role variant with is_banded and both header + footer get filled bands using the alert tokens.