Flyout CD v1.0
Flyout is used to show additional information about the page content, make additional settings, see notifications…
- Overview
- Specs
- Guidelines
Pattern
A flyout pattern is a dynamic interface element that expands or “flies out” from a designated area when triggered, typically by a user interaction such as a click or hover. This pattern provides additional options, menus, or details without navigating away from the current screen, enhancing user experience by maintaining context.
Flyouts are often used for secondary actions or detailed information, offering a clean, uncluttered interface while still providing quick access to relevant functionality.
1: Title
2: Icons
3: Main Content
4: Primary Button
5: Secondary Button
Used for:
Additional options
When there are secondary actions or options that supplement the primary action, a flyout can neatly present these without cluttering the main interface.
Contextual information
Flyouts are ideal for displaying extra information or details about an item without navigating away from the current page, ensuring users stay engaged with their primary task.
Forms and input
Flyouts can be used to present form fields or input options in a compact manner, expanding to collect user input and then collapsing back to save space.
Notifications and alerts
Flyouts can be used to display notifications or alerts in a non-intrusive manner, allowing users to view them without disrupting their current activity.
Don’t use for:
Overcomplication
Flyouts can add unnecessary complexity to an interface, especially if the same information or actions can be presented more simply in a static layout.
Context loss
Flyouts that require significant user input or decision-making can cause users to lose the context of their main task, leading to confusion when the flyout is closed.
Cluttered interaction
If overused, multiple flyouts can lead to a cluttered and overwhelming interface, causing users to lose track of where they are or what they were doing.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Updated color variables;
- Updated iconography;
- Updated typography;
Related
Notification Panel
Variations
Sizes
Small
.small {
width: 286px;
height: 850px;
title: var(--subtitle-1);
icons: var(--regular);
gap: var(--spacing-28);
paddingTop: var(--spacing-24, --spacing-24, 0);
paddingContent: var(0, --spacing-12);
primaryButton: var(--primary-theme-regular);
secondaryButton: var(--textButton-theme-regular);
}Regular
.regular {
width: 380px;
height: 850px;
title: var(--subtitle-1);
icons: var(--regular);
gap: var(--spacing-28);
paddingTop: var(--spacing-24, --spacing-24, 0);
paddingContent: var(0, --spacing-12);
primaryButton: var(--primary-theme-regular);
secondaryButton: var(--textButton-theme-regular);
}Large
.large {
width: 474px;
height: 850px;
title: var(--subtitle-1);
icons: var(--regular);
gap: var(--spacing-28);
paddingTop: var(--spacing-24, --spacing-24, 0);
paddingContent: var(0, --spacing-12);
primaryButton: var(--primary-theme-regular);
secondaryButton: var(--textButton-theme-regular);
}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.
Behavior
Sizes
The flyout can be enhanced with adaptable sizing options, including small, regular, and large configurations, to cater to different content and context needs.
A small flyout is ideal for concise information or quick actions, ensuring minimal disruption to the user’s workflow. The regular-sized flyout offers a balanced approach, providing enough space for moderate content or a list of options without overwhelming the interface. For more extensive content or detailed interactions, a large flyout is used, accommodating complex information while maintaining the user’s focus within the expanded view.
This flexible sizing approach ensures that flyouts remain a versatile and effective tool for enhancing user experience across various scenarios.
Dos & Dont’s
In views with forms, all the fields should be adjusted so that they don’t overlap with the Flyout (with the exception of the notifications panel);
Flyouts should only contain information that is not required reading;
The “Close” button is mandatory and must be present on all flyout types
Related
