Skip to content
VSCode Elements

Toolbar Button

This component is in the experimental phase, and its API is subject to change at any time. Any changes will be announced in the changelog. Please review it carefully with each library upgrade.

To use the icons, the codicons.css file must be included in the page:

<link rel="stylesheet" href="path/to/codicon.css" id="vscode-codicon-stylesheet">

Note the required id on the link element! To use web fonts in web components, the component needs to include the font stylesheet in addition to the page. This id serves as a lookup so the icon component can automatically create and insert it’s own link tag.

Basic example

Section titled “Basic example”

Toolbar Container is a simple container to arrange the toolar buttons.

<vscode-toolbar-container>
  <vscode-toolbar-button icon="files" label="Files"></vscode-toolbar-button>
  <vscode-toolbar-button icon="search" label="Search"></vscode-toolbar-button>
  <vscode-toolbar-button icon="source-control" label="Source Control"></vscode-toolbar-button>
  <vscode-toolbar-button icon="debug-alt" label="Debug"></vscode-toolbar-button>
  <vscode-toolbar-button icon="extensions" label="Extensions"></vscode-toolbar-button>
</vscode-toolbar-container>