Components

Button Group

Joins related buttons into a single segmented control.

Usage

Basic

HTML
<bs:bsui-button-group>
  <bs:bsui-button label="Day" variant="outline" />
  <bs:bsui-button label="Week" variant="outline" />
  <bs:bsui-button label="Month" variant="outline" />
</bs:bsui-button-group>

With a menu

A menu at the end of the group holds the actions that do not fit.

HTML
<bs:bsui-button-group>
  <bs:bsui-button label="Archive" variant="outline" />
  <bs:bsui-button label="Report" variant="outline" />
  <bs:bsui-menu>
    <bs:bsui-menu-trigger trigger_label="More" trigger_variant="outline" />
    <bs:bsui-menu-popup>
      <bs:bsui-menu-item label="Move to trash" />
      <bs:bsui-menu-item label="Mark as spam" />
      <bs:bsui-menu-item label="Forward" />
    </bs:bsui-menu-popup>
  </bs:bsui-menu>
</bs:bsui-button-group>

Mixed variants

Variants can differ inside a group, so the main action still leads.

HTML
<bs:bsui-button-group>
  <bs:bsui-button label="Save" />
  <bs:bsui-button label="Save as draft" variant="outline" />
</bs:bsui-button-group>

Attributes

This block takes no attributes.