Contextual Action Panel

Contextual action panels are similar to modals, but allow for more complex combinations of actions, navigation, and content.

• Contextual action panels appear above the surface of other content.
• They’re disruptive and stay on screen until an action is taken by the user.

When to Use Something Else

• Avoid using contextual action panels unless necessary—they intentionally add friction and cognitive load to a workflow. 
• For simpler messages or decisions, use a modal.
• For mobile devices, especially smartphones, use a modal.

Usability Guidance

• The contextual action panel is best used to maximize space for large content in the desktop view, where a user can use action buttons without scrolling.

UX Writing

• For the heading, use title case: Capitalize the first and last words and other important words in the text string.
• For all other copy, use sentence case: Only capitalize the first word and any proper nouns.

Accessibility

• Ensure that a proper order of elements is applied so that keyboard interactions work properly (see below).
• Due to the layout limitations of this component, action buttons may not be accessible on smartphones. Use a modal instead or reconsider the design in a way so that a modal isn’t needed.

Keyboard Interactions

• When the contextual action panel is displayed, a standard keyboard navigation applies:
  • Tab focuses on another element.
  • Shift + Tab focuses on previous element.
  • → / ← focuses on next/previous element in the group.
  • Space or Enter confirms (apply).
  • Esc dismisses the component (cancel action).

Related Pages

• Modal