Contextual Popup

Contextual Popup is a modal container invoked via a button. Contextual Popup allows the user to get access to important or relevant information while staying within context or opening a new Panel.

Behaviours & States


Contextual Popups are opened by selecting a Button, these are Button controls (any type or size) that have an additional UI component of a right facing arrow.

The Contextual Popup opens on the top, right, bottom or left of the button. It will automatically position itself where the screen space permits an unubstucted display. The direction of the popup appears can be fixed if you want to specify the direction it emanates.


The Contextual Popup has a nub that points toward the Action Button which is automatically positioned.


An open Contextual Popup can be closed by clicking outside of the Popup. Alternately it can be closed by using an "X" close button in the upper right corner.


Contextual Popups can contain any control and can scroll. The content inside must never be more than one level deep. 


Contextual Popups can be any size but the minimum width is 300 pixels and height is 220 pixels. The controls contained within the Popup must meet the sizing guidelines for that control. Long lists in the Popup can scroll.


The Action Buttons follow the same size requirements as the Button control.