<le-button-group>

Despite that technically <le-button-group> is not part of the toolbar and can be used anywhere, it's still a good idea to document it here, since it's primarily designed as a helper component for grouping buttons in toolbars.

Usage

For now, button group is doing two things, and it's doing them greatly:

First and the most important — it squishes buttons together, removing the gaps between them, and changing the shape of the buttons to look like they belong together (border-radius + overlapping).

One

Two

Three

Four

Five

<le-button-group>
  <le-button>One</le-button>
  <le-button>Two</le-button>
  <le-button>Three</le-button>
  <le-button>Four</le-button>
  <le-button>Five</le-button>
</le-button-group>
   Copy    Show more  

Second — the thing, why we're using them in the toolbars — it can collapse, showing the collapsed buttons in a menu at the end of the button group.

One

Two

Three

Four

Five

<le-button-group collapse="-3">
  <le-button>One</le-button>
  <le-button>Two</le-button>
  <le-button>Three</le-button>
  <le-button>Four</le-button>
  <le-button>Five</le-button>
</le-button-group>
   Copy    Show more  

Read bellow the details about the collapse attribute and how it works.

Important: The button group cannot collapse itself if there is no space to display all the buttons. It should be used with <le-toolbar> or other container that can change the collapse value based on some logic.

Children

Currently the only supported children of <le-button-group> are <le-button>. If you put any other element inside the button group, it will be rendered at the end of the button group, outside of the collapsing logic, and it will not be hidden when the buttons are collapsed.

One

Non-button element

Two

Three

Four

Five

<le-button-group collapse="2">
  <le-button>One</le-button>
  <div>Non-button element</div>
  <le-button>Two</le-button>
  <le-button>Three</le-button>
  <le-button>Four</le-button>
  <le-button>Five</le-button>
</le-button-group>
   Copy    Show more  

Priorities

Just like in the toolbar, the buttons in the button group have priorities. By default, the priority is determined by the order of the buttons — the first button has the highest priority, and the last button has the lowest priority. So when you collapse the button group, the buttons with the lowest priority will be hidden first.

You can change the priority of the buttons by using the priority attribute on the <le-button>. The button with the highest priority will be the last one to be hidden when the button group is collapsed.

Important: the smaller is the number in the attribute — the higher the priority.

Third

First to be hidden (no priority)

Last to stay

Fourth

Second — still visible

<le-button-group collapse="2">
  <le-button priority="3">Third</le-button>
  <le-button>First to be hidden (no priority)</le-button>
  <le-button priority="1">Last to stay</le-button>
  <le-button priority="4">Fourth</le-button>
  <le-button priority="2">Second — still visible</le-button>
</le-button-group>
   Copy    Show more  

You will be able to play with the collapsing order, on the next example.

Properties / Attributes

`@collapse`

This attribute controls how many buttons should be left visible when the button group is collapsed. It accepts:

empty attribute — only one button (the one with the highest priority, see priority) will be visible
number — the number of buttons that should be visible
negative number — the number of buttons that should be hidden. For example, collapse="-2" means that 2 buttons with the lowest priority will be hidden, and the rest will be visible.
zero collapse="0" — no buttons will be visible, only the overflow menu will be shown

First (3)

Second (no priority)

Third (1)

Fourth (4)

Fifth (2)

<le-button-group>
  <le-button priority="3">First (3)</le-button>
  <le-button>Second (no priority)</le-button>
  <le-button priority="1">Third (1)</le-button>
  <le-button priority="4">Fourth (4)</le-button>
  <le-button priority="2">Fifth (2)</le-button>
</le-button-group>
   Copy    Show more  

<le-button-group collapse>
  <le-button priority="3">First (3)</le-button>
  <le-button>Second (no priority)</le-button>
  <le-button priority="1">Third (1)</le-button>
  <le-button priority="4">Fourth (4)</le-button>
  <le-button priority="2">Fifth (2)</le-button>
</le-button-group>
   Copy    Show more  

<le-button-group collapse="3">
  <le-button priority="3">First (3)</le-button>
  <le-button>Second (no priority)</le-button>
  <le-button priority="1">Third (1)</le-button>
  <le-button priority="4">Fourth (4)</le-button>
  <le-button priority="2">Fifth (2)</le-button>
</le-button-group>
   Copy    Show more  

<le-button-group collapse="-1">
  <le-button priority="3">First (3)</le-button>
  <le-button>Second (no priority)</le-button>
  <le-button priority="1">Third (1)</le-button>
  <le-button priority="4">Fourth (4)</le-button>
  <le-button priority="2">Fifth (2)</le-button>
</le-button-group>
   Copy    Show more  

<le-button-group collapse="0">
  <le-button priority="3">First (3)</le-button>
  <le-button>Second (no priority)</le-button>
  <le-button priority="1">Third (1)</le-button>
  <le-button priority="4">Fourth (4)</le-button>
  <le-button priority="2">Fifth (2)</le-button>
</le-button-group>
   Copy    Show more  

`@disabled`

This attribute disables all the buttons in the button group, and also in the overflow menu. It is a boolean value, if the attribute is present, the button group will be disabled, if it's not present, the button group will be enabled.

First

Second

Third

Fourth

Fifth

<le-button-group collapse="2" disabled>
  <le-button>First</le-button>
  <le-button>Second</le-button>
  <le-button>Third</le-button>
  <le-button>Fourth</le-button>
  <le-button>Fifth</le-button>
</le-button-group>
   Copy    Show more  

<le-button-group collapse="2">
  <le-button>First</le-button>
  <le-button>Second</le-button>
  <le-button>Third</le-button>
  <le-button>Fourth</le-button>
  <le-button>Fifth</le-button>
</le-button-group>
   Copy    Show more  

`@label`

String used in a toolbar's overflow menu to describe the button group, when fully collapsed.

`@overflow-icons`

Boolean attribute that controls whether the buttons in the overflow menu should show their icons (if they have any). By default, the icons are not shown in the overflow menu, but if you set this attribute, the icons will be shown.

<le-button-group collapse="2">
  <le-button icon-only="copy" label="Copy"></le-button>
  <le-button icon-only="paste" label="Paste"></le-button>
  <le-button icon-only="cut" label="Cut"></le-button>
  <le-button icon-only="delete" label="Delete"></le-button>
  <le-button icon-only="download" label="Download"></le-button>
</le-button-group>

<le-button-group collapse overflow-icons>
  <le-button icon-only="align-left" label="Align Left"></le-button>
  <le-button icon-only="align-center" label="Align Center"></le-button>
  <le-button icon-only="align-right" label="Align Right"></le-button>
  <le-button icon-only="align-justify" label="Align Justify"></le-button>
</le-button-group>
   Copy    Show more  