Utility Panel

Overview

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.

Usage

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!

Types

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.

Float-Over-Page Overlay Utility Panel (recommended)

• 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.