Action Panels are rich content areas that are used to provide users a way to take action or view additional information without leaving their current experience.
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.
The header consists of a title, a close button. Icons for support and additional items can be added but are not required.
Tabs can be used to separate and breakup sections within an action panel.
The body of the action panel is where the main content goes.
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 panels can be used to take input from the user without taking them away from the view they are working in.
The form content should follow standard form UI patterns.
Our action buttons are always below the form and centered when in an Action Panel.
Action panels can be used to view and edit existing data.
The data in this section is the data the user wishes to view. If the user wishes to edit the data, they would first click on the edit button in the top right.
Clicking this button takes the user out of read only mode and transforms the content area into a form that can now be edited.
