ButtonGroup

• Docs
• API

Split button

Split Button

HTML

<vscode-button-group>
  <vscode-button>Split Button</vscode-button>
  <vscode-button
    icon="chevron-down"
    title="More actions..."
  ></vscode-button>
</vscode-button-group>

Split button with dropdown

Send

HTML

<div class="button-with-menu">
  <vscode-button-group>
    <vscode-button>Send</vscode-button>
    <vscode-button
      icon="chevron-down"
      title="More actions..."
      id="toggle-menu-button"
    ></vscode-button>
  </vscode-button-group>
  <vscode-context-menu
    id="dropdown-menu"
    class="dropdown-menu"
  ></vscode-context-menu>
</div>

CSS

.button-with-menu {
  display: inline-block;
  position: relative;
}

.dropdown-menu {
  left: 100%;
  margin-left: -26px;
  position: absolute;
  width: auto;
  z-index: 10;
}

JavaScript

const menu = document.querySelector("#dropdown-menu");
const button = document.querySelector("#toggle-menu-button");

menu.data = [
  {
    label: "Schedule for later",
    value: "schedule",
  },
  {
    label: "Delete",
    value: "delete",
  },
  {
    label: "Save draft",
    value: "save",
  },
];

button.addEventListener("click", () => {
  menu.show = !menu.show;
});

menu.addEventListener("vsc-select", (event) => {
  console.log(event);
});

Button group

B I U

HTML

<div class="wysiwyg-toolbar">
  <vscode-button-group>
    <vscode-button secondary title="Align left" icon-only
      ><svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M1 3.5C1 3.22386 1.22386 3 1.5 3H10.5C10.7761 3 11 3.22386 11 3.5C11 3.77614 10.7761 4 10.5 4H1.5C1.22386 4 1 3.77614 1 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H6.5C6.77614 11 7 11.2239 7 11.5C7 11.7761 6.77614 12 6.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
          fill="#212121"></path></svg
      ></vscode-button
    >
    <vscode-button secondary title="Align center" icon-only
      ><svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M3 3.5C3 3.22386 3.22386 3 3.5 3H12.5C12.7761 3 13 3.22386 13 3.5C13 3.77614 12.7761 4 12.5 4H3.5C3.22386 4 3 3.77614 3 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM5 11.5C5 11.2239 5.22386 11 5.5 11H10.5C10.7761 11 11 11.2239 11 11.5C11 11.7761 10.7761 12 10.5 12H5.5C5.22386 12 5 11.7761 5 11.5Z"
          fill="#212121"></path></svg
      ></vscode-button
    >
    <vscode-button secondary title="Align right" icon-only
      ><svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M5 3.5C5 3.22386 5.22386 3 5.5 3H14.5C14.7761 3 15 3.22386 15 3.5C15 3.77614 14.7761 4 14.5 4H5.5C5.22386 4 5 3.77614 5 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM9 11.5C9 11.2239 9.22386 11 9.5 11H14.5C14.7761 11 15 11.2239 15 11.5C15 11.7761 14.7761 12 14.5 12H9.5C9.22386 12 9 11.7761 9 11.5Z"
          fill="#212121"></path></svg
      ></vscode-button
    >
    <vscode-button secondary title="Justified" icon-only
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="none"
      >
        <path
          fill="#212121"
          d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Z"
        ></path>
      </svg>
    </vscode-button>
  </vscode-button-group>
  <vscode-button-group>
    <vscode-button secondary icon-only title="Bold"
      ><span class="icon-letter b">B</span></vscode-button
    >
    <vscode-button secondary icon-only title="Italic"
      ><span class="icon-letter i">I</span></vscode-button
    >
    <vscode-button secondary icon-only title="Underline"
      ><span class="icon-letter u">U</span></vscode-button
    >
  </vscode-button-group>
</div>

CSS

.wysiwyg-toolbar {
  display: flex;
  gap: 6px;
}

.wysiwyg-toolbar path {
  fill: currentColor;
}

.icon-letter {
  flex: 1;
  font-family: sans-serif;
  font-size: 15px;
  height: 16px;
  line-height: 15px;
  vertical-align: middle;
  text-align: center;
  width: 16px;
}

.icon-letter.b {
  font-weight: bold;
}

.icon-letter.i {
  font-style: italic;
}

.icon-letter.u {
  text-decoration: underline;
}