🚀 Get in VS Code!

Panel

The Panel functions as another main area to display View Containers.

✔️ Do

  • Render Views in the Panel that benefit from more horizontal space
  • Use for Views that provide supporting functionality

❌ Don't

  • Use for Views that are meant to be always visible since users often minimize the Panel
  • Render custom Webview content that fails to resize/reflow properly when dragged to other View Containers (like the Primary or Secondary Sidebars).

Example of a panel

Panel Toolbar

The Panel Toolbar can expose options scoped to the currently selected View. For example the Terminal view exposes View Actions to add a new terminal, split the view layout, and more. Switching to the Problems view exposes a different set of actions. Similar to the Sidebar Toolbar, the toolbar will only render if there is just a single View. If more than one View is used, each View will render its own toolbar.

✔️ Do

  • Use an existing product icon if available
  • Provide clear, useful tooltips

❌ Don't

  • Don't add an excessive number of icon buttons. Consider using a Context Menu if more options are needed for a specific button.
  • Don't duplicate the default Panel icons (collapse/expand, close, etc.)

Example of a panel toolbar with a single view

In this example, the single View rendered in the Panel renders its View Actions in the main Panel Toolbar.

Example of a panel toolbar with multiple views

In this example, multiple Views are used, so each View exposes its own specific View Actions.