Description
Requires #1061
Pre-requisite for #1069 and #1070
Description
A popover is a simple overlay, presented after a user-generated action. It is always positioned in relation to its source. Popovers can be used in any platform or screen size.
Popovers don't dim the rest of the screen to separate the content presentation from the rest of the screen.
Interaction with the rest of the screen is temporarily blocked while a popover is active. A popover can be dismissed by clicking anywhere outside of it. A popover can also be dismissed after selecting an option inside of it, or clicking on an optional Close button.
A popover is the overlay type for menus, for listing actions, for selecting one or multiple items. A popover can have overlay headers, action lists, and overlay footers. Popovers can also support any custom content inside them.
Simple and small popovers can remain as-is on mobile. As more elements are added to it, mobile-specific style variations such as Bottom sheet and Full-screen should be considered.
Resources
Figma:
Prototype:
Screenshot
Components
Popover
Behaviors
-
A popover is always positioned in relation to its source, by default set as
outside bottom start. If the popover doesn't fit the available screen size, it tries to reposition itself so it's visible to the user while remaining anchored to the source. -
Keep popovers out of the viewport edges. Popovers should be at least 16px away from the viewport boundaries. (as long as the source anchoring allows it)
-
Popovers can be positioned
outsideorinsidethe source area, placing them respectively next to or on top of the source. Placing the popover on top of the source can be useful when it contains editable data.
Props
name: position
type: "inside" | "outside"
default: "outside"
description:
name: side
type: "top" | "bottom" | "right" | "left" | "center"
default: "bottom"
description:
name: align
type: "start" | "center" | "end"
default: "start"
description:
name: anchorOffset
type: number
default: 4 (px)
description: The offset sets the spacing between the source and the popover.
name: alignOffset
type: number
default: 0
description: A cross offset sets a cross axis alignment, horizontally for top | bottom, and vertically for right | left.
name: transition
type: "none" | "fadeSlide" | "scale"
default: "fadeSlide"
description: A fadeSlide is a subtle animation used to reinforce the connection between the popover and its source. scale can be used when the popover position is set to inside. Before showing the final popover contents, the popover grows from the original source dimensions. Only then the popover contents are revealed.