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, displaying alerts, collecting input, or presenting additional details without navigating away from 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.
- A: Modal Variation;
- B: Dialog Variation;
- 1: Title;
- 2: Close;
- 3: Main Content;
- 4: Action Buttons;
- 5: Accent Icon;
Used for:
Confirm destructive actions
Use modals to confirm critical actions, such as deletions or submissions, where irreversible changes occur.
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 navigating away from the current page. This is useful for login forms, feedback requests, or any data entry tasks that should be completed within 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 between different parts of an application quickly, modals can hinder this by blocking access to the rest of the interface.
Non-critical content
Do not use modals 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
Avoid using modals that prevent users from accessing essential actions or information needed to complete their current task. This can create frustration and disrupt the workflow.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Updated button styles;
- Updated iconography;
- Updated typography;
- Updated spacings;
Modal
Sizes
Small
.small {
width: 576px;
padding: var(--spacing-16, --spacing-24);
header {
title: var(--Heading-H6);
title_color: var(--grey-8);
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(--textButton-theme-regular);
}
shadow: var(--shadow-tertiary);
}Regular
.small {
width: 864px;
padding: var(--spacing-16, --spacing-24);
header {
title: var(--Heading-H6);
title_color: var(--grey-8);
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(--textButton-theme-regular);
}
shadow: var(--shadow-tertiary);
}Large
.large {
width: 1152px;
padding: var(--spacing-16, --spacing-24);
header {
title: var(--Heading-H6);
title_color: var(--grey-8);
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(--textButton-theme-regular);
}
shadow: var(--shadow-tertiary);
}Dialog
Device
Desktop
.desktop {
width: 576px;
padding: var(--spacing-16, --spacing-24);
header {
title: var(--Heading-H6);
title_color: var(--grey-8);
close: var(--close-large);
gap: var(--spacing-16);
gap_content: var(--spacing-16);
}
content{
gap_top: var(--spacing-8);
gap_bottom: var(--spacing-16);
accent_icon: 64px;
description: var(--body-1);
gap: var(--spacing-16);
}
footer {
gap: var(--spacing-16);
button_1: var(--primary-theme-regular);
button_2: var(--textButton-grey-regular);
}
shadow: var(--shadow-tertiary);
}Mobile
.mobile {
width: 398px;
padding: var(--spacing-16, --spacing-24);
header {
title: var(--Heading-H6);
title_color: var(--grey-8);
close: var(--close-large);
gap: var(--spacing-16);
gap_content: var(--spacing-16);
}
content{
gap_top: var(--spacing-8);
gap_bottom: var(--spacing-16);
accent_icon: 64px;
description: var(--body-1);
gap: var(--spacing-16);
}
footer {
gap: var(--spacing-16);
button_1: var(--primary-theme-regular);
button_2: var(--textButton-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, medium and large. You use them by selecting the size that works best for the amount of content.
We offer various modal styles to enhance user experience and workflow efficiency. Modals are used for focused tasks like forms, datagrids, and navigation. In contrast, dialogs are action-based, typically used for confirming actions such as deleting a file.
Small
With a width of 40%, but with a maximum height of 80%. It is ideal for informative modals with little information and for modals with confirmation of actions (e.g. record deletion modal).
Regular
With a width of 60% but with a maximum height of 80%. It is ideal for modals with small forms or informative modals with some content.
Large
With a width 80% but with a maximum height of 80%. It is ideal for templates with a large amount of content and larger forms.
Behavior
Position
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 ensure that users focus on the modal content, especially when the screen real estate is ample.
Mobile
On mobile devices, however, the modal positioning strategy differs due to the smaller screen size and user interaction patterns. Modals often appear at the bottom or center of the screen on mobile, with bottom positioning especially suited for confirmation dialogs.
This approach takes advantage of the ease of thumb reach, allowing users to access buttons and make quick decisions with minimal effort. By adapting modal placement to the device and user context, designers can enhance accessibility and usability across platforms.
Styles of Modals
We offer various modal styles tailored to application needs, enhancing user experience and workflow efficiency.
Our options include forms for capturing input, datagrids for managing complex datasets, steppers for navigating multi-step processes, vertical navigation for browsing vertically structured content, and horizontal navigation for accessing adjacent content smoothly.
Forms
Datagrid
Stepper
Vertical Navigation
Horizontal Navigation
Dos & Dont’s
Care must be taken when using a modal on top of another modal. They can be used in the case of discarding edits or creating entities/items;
Do not use a modal without a close icon to close it and an option to cancel the operation:
Case Studies
