Toolbar Button

• Docs
• API

Caution

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

Caution

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

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

With caption

Account

HTML

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

Text-only

Account

HTML

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

Toggleable

HTML

<vscode-toolbar-button
  icon="account"
  label="Account"
  toggleable
  id="toggle-example"
></vscode-toolbar-button>

JavaScript

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

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