Flyout
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: Status Indicator
4: Main Content
5: Primary Button
6: Secondary Button
7: Button Icon
8: Expand/Collapse 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;
- Added Status Indicator
Related
Notification Panel
Variations
Sizes
Small
.small {
width: 286px;
height: 850px;
title: var(--subtitle-1);
icons: var(--regular);
statusIndicator: var(--extended);
gapTitleStatus: var(--spacing-8);
gap: var(--spacing-16);
paddingTop: var(--spacing-24, --spacing-16, 0);
paddingContent: var(0, --spacing-16);
buttonIcon: var(--tertiary-theme-regular);
primaryButton: var(--primary-theme-regular);
overflowMenu: var(--regular);
}Regular
.regular {
width: 380px;
height: 850px;
title: var(--subtitle-1);
icons: var(--regular);
statusIndicator: var(--extended);
gapTitleStatus: var(--spacing-8);
gap: var(--spacing-16);
paddingTop: var(--spacing-24, --spacing-16, 0);
paddingContent: var(0, --spacing-16);
buttonIcon: var(--tertiary-theme-regular);
primaryButton: var(--primary-theme-regular);
secondaryButton: var(--textButton-theme-regular);
}Large
.large {
width: 474px;
height: 850px;
title: var(--subtitle-1);
icons: var(--regular);
statusIndicator: var(--extended);
gapTitleStatus: var(--spacing-8);
gap: var(--spacing-16);
paddingTop: var(--spacing-24, --spacing-16, 0);
paddingContent: var(0, --spacing-16);
buttonIcon: var(--tertiary-theme-regular);
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.
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.
Depending on the size, some elements need to adapt due to space constraints. Per example if the expand/collapse icon button is applied within a small sized flyout with three additional buttons, the totality of the buttons will not be shown. So in this cases a Splitbutton or Overflow Button will be displayed to show the secondary actions available.
Expand/Collapse
The expand/collapse behavior is designed to be responsive and adaptable. When collapsed, the flyout retains its original size, which can vary between small and large depending on the context.
When expanded, the flyout adjusts to occupy two-thirds of the screen width, providing a larger viewing area for the content. For example, on a screen with a width of 1440 px, the expanded flyout will stretch to 960 px, ensuring efficient use of space while maintaining a balanced and user-friendly interface. By default, a flyout can show two fields per line; in the expanded version, three fields will be shown.
If the user is inside the tablet breakpoint, when the flyout is expanded, it will occupy the entire width of the screen.
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.
Navigation with Flyout
In certain specific scenarios, we have the capability to directly edit entries from a datagrid using a flyout. To enhance user experience, pagination has been added within the flyout to allow easy navigation, particularly when the flyout is expanded to display more content. This ensures that users can smoothly scroll through information without losing their place.
When working within the datagrid, users can easily select another entry with just one click, which instantly updates the content displayed in the flyout. However, to prevent accidental data loss, if any changes have been made to the data within the flyout but not yet saved, a dialog box will appear. This dialog serves as a confirmation step, ensuring that users are aware of unsaved changes and have the opportunity to save or discard them before proceeding with the new selection. This approach helps maintain data integrity and provides a safeguard against unintentional edits.
Within the flyout itself, a previous and next buttons will be available in the footer, in order to avoid provide the total number of entries inside the datagrid, as this number can easily escalate.
The “Close” button is mandatory and must be present on all flyout types.
Related
