Button

• Docs
• API

Note

This component is compatible with the standard <form> element. For more information on form submission and client-side validation, please refer to the Working with forms section.

Basic example

Button

HTML

<vscode-button>Button</vscode-button>

Secondary button

Secondary button

HTML

<vscode-button secondary>Secondary button</vscode-button>

Disabled button

Disabled button

HTML

<vscode-button disabled>Disabled button</vscode-button>

Button with icons

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.

Icons

HTML

<vscode-button icon="account" icon-after="chevron-right">Icons</vscode-button>

Icon button

HTML

<vscode-button icon="settings-gear" title="Settings"></vscode-button>

Custom icons

Customized styles

Styles can be tweaked.

Add item Commit

HTML

<vscode-button class="settings-button-example">Add item</vscode-button>
<vscode-button class="scm-button-example" icon="check">Commit</vscode-button>

CSS

.settings-button-example {
  line-height: 18px;
  padding: 2px 14px;
}

.scm-button-example {
  line-height: 26px;
  width: 179px;
}