HomeFoundationsComponents
AccordionAction Icon
Adjustment Bar
BreadcrumbButtonButton GroupCardCheckboxChipContext Switcher
Data Visualization
Date Picker
DialogEmpty State
Image
Input
Input Callout
LinkListLoader
Menu
ModalPopoutProgress BarRadioRange SliderScroll BarSelect
Selection Bar
StepperSwitch
Table
TabsTileToastToggle ButtonTooltip
Tree Menu
Patterns
DevelopmentFAQ
Popout
Last Updated on Sep 29, 2022
A popout displays brief, informational content in an overlay. They can contain limited interaction if needed.
View Figma ComponentView MAF Storybook

Do's and Don'ts

Always position next to the interface element that triggers them.
Use for secondary or less important information and actions.
Contain content and simple actions that share a relationships to each other
Display supplementary content or actions, without obscuring the whole page.
Don’t make the popover larger than 768px wide or tall. They should be small to medium sized containers.
Don’t require a user to complete a complex task. Use a modal or a separate page instead.
Table of Contents
Component VariantsDesign PrinciplesDo's and Don'ts
Related Components
Menu
ModalTooltip
Copyright © 2022 The Nielsen Company (US), LLC. All Rights Reserved.