Modal
Modals are overlay windows that focus user attention on essential tasks, enhancing UX by temporarily disabling the background interface.
- Overview
- Specs
- Guidelines
Pattern
Modals are an integral part of modern user interface design, providing a powerful tool for capturing user attention and conveying essential information. As overlay windows that appear on top of the main content, modals serve various purposes, such as confirming actions, collecting input, or presenting additional details without leaving the current page.
By temporarily disabling the background interface, modals create a focused interaction space, encouraging users to engage with important tasks or decisions. However, designing effective modals requires careful consideration of usability and accessibility to ensure they enhance the user experience rather than disrupt it.
- 1: Title
- 2: Main Content
- 3: Close
- 4: Fullscreen
- 5: Action Buttons
Used for:
Focus on critical information
Modals draw attention to essential information or actions that require user acknowledgment or response. By temporarily blocking the background, they ensure the user focuses on the task at hand.
Form input
Modals can be used to collect user input without leaving the current page. This is useful for login forms, feedback requests, or any data entry tasks that need to be completed in the context of the current workflow.
Onboarding or tutorials
Use modals to guide new users through important features or processes in an application. This can help improve the onboarding experience.
Don’t use for:
Critical navigation
If users need to navigate quickly between different parts of an application, modals can make this difficult by blocking access to the rest of the interface.
Non-critical content
Modals are not used for content that isn’t crucial or time-sensitive. Information that can be presented inline or on a separate page is better suited outside of a modal.
Blocking actions
The use of modals that prevent users from accessing essential actions or information needed to complete their current task should be avoided, as this can create frustration and disrupt the workflow.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Added Fullscreen option;
Related
Close
Accent Icons
Variations
Sizes
Small
.small {
width: 576px;
padding: var(--spacing-16, --spacing-24);
header {
title: var(--Heading-H6);
title_color: var(--grey-9);
fullscreen-icon: 24px;
close: var(--close-large);
gap: var(--spacing-16);
gap_content: var(--spacing-16);
}
content{
gap_top: var(--spacing-8);
gap_bottom: var(--spacing-16);
}
footer {
gap: var(--spacing-16);
button_1: var(--primary-theme-regular);
button_2: var(--textButton-grey-regular);
button_3: var(--tertiary-grey-regular);
}
shadow: var(--shadow-tertiary);
}Regular
.regular{
width: 864px;
padding: var(--spacing-16, --spacing-24);
header {
title: var(--Heading-H6);
title_color: var(--grey-9);
fullscreen-icon: 24px;
close: var(--close-large);
gap: var(--spacing-16);
gap_content: var(--spacing-16);
}
content{
gap_top: var(--spacing-8);
gap_bottom: var(--spacing-16);
}
footer {
gap: var(--spacing-16);
button_1: var(--primary-theme-regular);
button_2: var(--textButton-grey-regular);
button_3: var(--tertiary-grey-regular);
}
shadow: var(--shadow-tertiary);
}Large
.large {
width: 1152px;
padding: var(--spacing-16, --spacing-24);
header {
title: var(--Heading-H6);
title_color: var(--grey-9);
fullscreen-icon: 24px;
close: var(--close-large);
gap: var(--spacing-16);
gap_content: var(--spacing-16);
}
content{
gap_top: var(--spacing-8);
gap_bottom: var(--spacing-16);
}
footer {
gap: var(--spacing-16);
button_1: var(--primary-theme-regular);
button_2: var(--textButton-grey-regular);
button_3: var(--tertiary-grey-regular);
}
shadow: var(--shadow-tertiary);
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Sizes
There are three possible modal sizes: small, regular and large. Their use depends on the size that best suits the amount of content.
Modals are used for focused tasks, such as forms, datagrids and navigation. We offer various styles to enhance user experience and workflow efficiency.
Small
The small size corresponds to a width of 40% and a maximum height of 80%. It is ideal for informative modals with little information. Although we have a template available for small regular modals, in many cases, it might be preferable to use a dialog modal instead, as its simplicity is better suited to providing less content.
Regular
The regular size corresponds to a width of 60% and a maximum height of 80%. It is ideal for modals with small forms or informative modals with some content.
Large
The large size corresponds to a width of 80% and a maximum height of 80%. It is ideal for templates with a large amount of content and larger forms.
Behavior
Desktop
When designing modals, it’s essential to consider the device and the context in which they appear to optimize user experience.
On desktop interfaces, modals are typically placed at the top or center of the screen, drawing immediate attention to the content without obstructing the user’s view. This central positioning helps to ensure that users focus on modal content, especially when the screen real estate is large.
Mobile
On mobile devices, however, the modal positioning strategy differs due to the smaller screen size and user interaction patterns. Modals may appear at the bottom or center of the screen on mobile, depending on what’s required from the user.
This approach can take advantage of the ease of thumb reach, allowing users to access buttons and make quick decisions with less effort. By adapting modal placement to the device and user context, designers can enhance accessibility and usability across platforms.
Hierarchy
In order to ensure maximum visibility, the primary action should appear as a button (or split button) in the primary variation.
If a secondary action is required, it should be presented as a primary grey button (or split button in a secondary variation). This should be used for tasks of major importance that have less priority over the primary one.
Any supporting actions should use tertiary button icons, which allow users to access various functions without overwhelming the interface. For this same reason, all other remaining functions should be consolidated into an overflow menu.
There may be cases where adding an additional left-aligned button – such as a back button – helps improve the user experience. These should show as grey text buttons.
It is worth noting that the action bar buttons follow these same guidelines as they are very similarly structured.
Cancel button
The cancel button should be used when handling complex modals with several steps. This ensures users are aware they are completely abandoning the task without applying any changes, which might not always be clear when there’s only a close icon.
Because closing is a supporting action, it must be represented as such – with tertiary buttons.
As each provides a different user experience, if you need to add a cancel button, the close icon should remain.
Modal Styles
We offer various modal styles adapted to the applications’ needs, enhancing both the user experience and workflow efficiency.
Our options include forms for collect input, datagrids to manage complex datasets, steppers to navigate multi-step processes, vertical navigation to browse vertically structured content, and horizontal navigation to access adjacent content seamlessly.
Make sure you include only the necessary information to ensure that the modals are easy to navigate.
For the cases where the forms are too long, the fullscreen option can be used.
Forms
Datagrid
Stepper
Vertical Navigation
Horizontal Navigation
Case Studies
