Skip to main content

Pop Up

Typically invoked upon clicking an identifiable interactive element, a Pop Up contains a curated set of common actions, display controls, rich data, or imagery associated with the interactive element.

Appearance and Behavior

Usually hidden on load, a Pop Up is invoked by clicking an interactable element with a defined target area. To close a Pop Up, the user may click outside its bounds, click a dedicated close button, or select an option within.

Anatomically, a Pop Up is comprised of a content container with an arrow protruding from its edge that always points at the item from which it was invoked. Depending on a variety of factors – such as the size of the Pop Up itself, the size of the display, and scrolled position of the window – the arrow’s location along the Pop Up’s edge is variable. The width of the Pop will be pre-defined and specific to its content.

In terms of placement screen, the entire Pop Up must always be visible and never exceed the window frame. Furthermore, it must never obscure other screen items that require persistent visibility (such as Classification Banners or Application States).

All interactable items (e.g. menu items, links, buttons, checkboxes) appearing within a Pop Up are displayed using the appropriate Astro color representing the unselected state. Color changes corresponding to hover, focus, and select actions all apply. Disabled items are indicated by reduced opacity.

Rules of Thumb

Examples

Do: Position Pop Ups to avoid obscuring vital screen elements like classification banners
Do: Position Pop Ups to avoid obscuring vital screen elements like classification banners
Don’t: Cover vital screen elements like classification markings
Don’t: Cover vital screen elements like classification markings
Do: Position a Pop Up so it stays within the edges of the frame
Do: Position a Pop Up so it stays within the edges of the frame
Don’t: Position Pop Up so it exceeds the limits of the frame
Don’t: Position Pop Up so it exceeds the limits of the frame
Do: Originate Pop Up from obvious, interactable triggers
Do: Originate Pop Up from obvious, interactable triggers
Don’t: Trigger Pop Up from items that don’t appear to be interactable
Don’t: Trigger Pop Up from items that don’t appear to be interactable