Skip to main content

Utility Panel

Utility panel is a container for additional content and/or functionality related to the primary screen.


The utility panel is designed to add additional content (usually on the right side of the user interface) to a full-screen application. It is located alongside the primary content of the page and activated by a call to action, e.g., by a Button.


Use when

  • You need extra content or functionality related to the primary content.
  • You need to interact with the primary content (e.g. adding, editing, saving).
  • You want to provide supplemental tasks required by the underlying page.

Don’t use when

  • You need to navigate between pages of an application. Instead, use Side Navigation.
  • You need to display important warnings. Instead, use an Alert or a Modal
  • You are designing for a mobile application - use the mobile-specific utility panel – Coming soon!


When the utility panel is being used by the user, it opens a window (panel). This functionality either:

  • Overlays the page content (with or without a background overlay), or
  • Pushes the page’s content.

Do not use both types in one application.

When the utility panel is inactive, it is closed. It can be triggered again by a call to action.

  • The utility panel overlaps the content of the page.
  • Use this type of side panel when the content on the page is difficult to resize.

Push Utility Panel

  • The utility panel pushes the content of the page. The content is scaled down.
What's changed
Date Version Notes Contributors
06/20/2023 1.0.0 New component added. J. de Wit, C. Cuellar, A. Galstyan, E. Gunther, S. Kaukonen. D. Silcock