Button
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
Section titled “Basic example”<vscode-button>Button</vscode-button>Secondary button
Section titled “Secondary button”<vscode-button secondary>Secondary button</vscode-button>Disabled button
Section titled “Disabled button”<vscode-button disabled>Disabled button</vscode-button>Button with icons
Section titled “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">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
<vscode-button icon="account" icon-after="chevron-right"> Icons</vscode-button>Icon button
Section titled “Icon button”If the button only displays a built-in icon, it will automatically have a square shape.
Provide a title or aria-label attribute for accessibility.
<vscode-button icon="settings-gear" title="Settings"></vscode-button>Custom icons
Section titled “Custom icons”Any HTML or SVG markup can be used as an icon. You can use the iconOnly property
to make it square.
Provide a title or aria-label attribute for accessibility.
<vscode-button icon-only secondary title="HTML5"> <img src="/icons/html.svg" width="16" height="16" alt="HTML 5 icon" /></vscode-button>