Sign In

Action Panels

Action Panels are rich content areas that are traditionally used to provide users a way to take action or view additional information without leaving their current experience.

Background and Purpose

Action Panels give us a way to interact with our users without having the user leave their current experience. In the past, our interfaces would leverage modals for similar tasks. However, the challenge with modals as a pattern is the user loses context when the content they are working on is now obscured behind a modal. Action Panels allow us to move the same tasks and functionality into a rich content area without hiding the user’s previous view.


  1. Header

    The header area can be used to provide context to the action panel. The header is optional and not required.

  2. Body

    The body of the aciton panel is where the main content goes.

  3. Footer

    The footer area can be used to provide final calls to actions, or navigational elements. The footer is optional but when it’s used, it’s usually fixed and doesn’t scroll with the body.

  4. Close Button Icon

    The close button icon is not a required feature. However, If a design does use the close button icon it should be located in the top right of component.

action panel structure

Examples & Variations

Action Panels are a versatile UI element.  Here are some examples of how we’ve leveraged them in our products