Button

Basic example

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

Button

Secondary button

Disabled button

Icons

<vscode-button id="button-1">Button</vscode-button>
<vscode-button id="button-2" secondary>Secondary button</vscode-button>
<vscode-button id="button-3" disabled>Disabled button</vscode-button>
<vscode-button id="button-4" icon="account" icon-after="chevron-right">Icons</vscode-button>

document.getElementById('button-1').addEventListener('click', (ev) => {
  console.log(ev);
});
document.getElementById('button-2').addEventListener('click', (ev) => {
  console.log(ev);
});
document.getElementById('button-3').addEventListener('click', (ev) => {
  console.log(ev);
});
document.getElementById('button-4').addEventListener('click', (ev) => {
  console.log(ev);
});

Customized styles

Styles can be tweaked.

Add item

Commit

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

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

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