Pattern Status
|
Status |
Needs review |
|---|---|
|
Owner |
Design System Team |
|
Last Updated |
13.11.2025 |
Overview
Panels and overlays are UI elements used to present information, gather input, or provide tools without navigating away from the main page.
Panels (such as Side Panel and Filter Panel) integrate into the page layout, while overlays (such as Dialog and Floating Panel) float above content, drawing the user’s attention.
This pattern helps designers and developers decide which component to use for a given task, balancing focus, urgency, and the impact on page layout.
Modality
Modality defines whether a component blocks interaction with the main content or integrates with it.
Panels
Panels are non-modal and integrate into the page layout, allowing users to continue interacting with the main content.
They are used for non-critical information or optional tasks, such as viewing details or filtering data.
Overlays
Overlays are modal elements that float above the page, temporarily blocking interaction until the user completes or dismisses the task.
They are typically used to present critical information or required input, such as confirming an action or creating an entity.
Components Comparison
|
Component |
Modality |
Behavior |
|---|---|---|
|
Dialog |
Modal |
Blocks main content for critical tasks or confirmations. |
|
Floating Panel |
Modal |
Full-height panel for complex workflows. |
|
Side Panel |
Non-Modal |
Provides contextual information and shrinks the main content. |
|
Filter Panel |
Non-Modal |
Offers controls for filtering data without blocking the main content. |
Examples
- Dialog: Confirm deletion or show critical alerts.
- Floating Panel: Edit or create simple entities via a form.
- Side Panel: Display details or contextual information.
- Filter Panel: Filter multiple fields within a single view.
Best Practices
- Use modal components (Dialogs, Floating Panels) for urgent or task-focused workflows.
- Use non-modal components (Side Panels, Filter Bars) for optional or persistent content.
- Keep content concise and actionable.
- Use dividers or Progress Indicators to organize complex content.
- Avoid using Cards and Accordions inside panels.
- Maintain consistent spacing, sizing, and visual hierarchy across all panels and overlays.
- Avoid stacking multiple modals.
Accessibility Considerations
- Ensure keyboard and screen reader accessibility for all components.
- Trap focus inside modal components until dismissed.
- Use ARIA roles and labels for modals.
Related Components