Toolbar Button

Docs
API

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:

1
<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

In icon-only mode, a label for screen readers can be defined using the label attribute.

HTML

1
<vscode-toolbar-button
2
  icon="account"
3
  label="Account"
4
></vscode-toolbar-button>

With caption

Account

HTML

1
<vscode-toolbar-button icon="account">Account</vscode-toolbar-button>

Text-only

Account

HTML

1
<vscode-toolbar-button>Account</vscode-toolbar-button>

1
<vscode-toolbar-button
2
  icon="account"
3
  label="Account"
4
  toggleable
5
  id="toggle-example"
6
></vscode-toolbar-button>

1
  const el = document.querySelector("#toggle-example");
2

3
  el.addEventListener("change", () => {
4
    console.log("Checked:", el.checked);
5
  });