v0.11.0

Appearance

Button group <l-button-group> ​

Joins related .l-button elements into a single segmented control with shared borders.

HTML tag<l-button-group>
⏣Native HTML
⬡Progressive
◇Custom
⬢Shadow DOM
Custom Element (no Shadow DOM)
html
<l-button-group label="Alignment">
  <button class="l-button">Left</button>
  <button class="l-button">Center</button>
  <button class="l-button">Right</button>
</l-button-group>

Options ​

Label ​

Add label to give the group an accessible name announced by screen readers.

Code
html
<l-button-group label="Alignment">
  <button class="l-button">Left</button>
  <button class="l-button">Center</button>
  <button class="l-button">Right</button>
</l-button-group>

Orientation ​

Add orientation="vertical" to stack the buttons.

Code
html
<l-button-group
  label="Alignment"
  orientation="vertical"
>
  <button class="l-button">Left</button>
  <button class="l-button">Center</button>
  <button class="l-button">Right</button>
</l-button-group>

Sizes ​

Set data-size on every button so the group stays even.

Code
html
<l-button-group label="Pagination">
  <button
    class="l-button"
    data-size="lg"
  >
    Previous
  </button>
  <button
    class="l-button"
    data-size="lg"
  >
    Next
  </button>
</l-button-group>

Examples ​

Icon toolbar ​

Group icon-only buttons into a compact toolbar.

Code
html
<l-button-group label="Text formatting">
  <button
    class="l-button"
    aria-label="Bold"
  >
    <iconify-icon icon="lucide:bold"></iconify-icon>
  </button>
  <button
    class="l-button"
    aria-label="Italic"
  >
    <iconify-icon icon="lucide:italic"></iconify-icon>
  </button>
  <button
    class="l-button"
    aria-label="Underline"
  >
    <iconify-icon icon="lucide:underline"></iconify-icon>
  </button>
</l-button-group>

Split button ​

Pair a primary action with an <l-dropdown> of related actions. The group rounds the corners of the dropdown trigger automatically.

Save as draft Save as template
Code
html
<l-button-group label="Save options">
  <button
    class="l-button"
    data-variant="primary"
  >
    Save
  </button>
  <l-dropdown>
    <button
      slot="trigger"
      class="l-button"
      data-variant="primary"
      data-icon-only
      aria-label="More save options"
    >
      <iconify-icon icon="lucide:chevron-down"></iconify-icon>
    </button>
    <l-dropdown-item value="draft">Save as draft</l-dropdown-item>
    <l-dropdown-item value="template">Save as template</l-dropdown-item>
  </l-dropdown>
</l-button-group>

Accessibility ​

Criteria ​

Role

Host gets role="group" to expose the buttons as a set

WCAG1.3.1
RGAA9.3
Accessible name

label sets aria-label so assistive tech announces the group purpose

WCAG4.1.2
RGAA11.1
Orientation

aria-orientation reflects the orientation attribute

WCAG1.3.1
Focus order

Each button is an independent Tab stop; the focus ring is raised above neighbours so it is never clipped

WCAG2.4.72.4.11
RGAA10.7
Icon-only buttons

Each icon-only button needs its own aria-label

WCAG4.1.2
RGAA11.1

Keyboard interactions ​

Tab
Moves focus to the next button in the group
ShiftTab
Moves focus to the previous button
Enter
Activates the focused button
Space
Activates the focused button

API reference ​

Importing ​

js
import 'luxen-ui/button-group';
css
@import 'luxen-ui/css/button-group';

Attributes & Properties ​

labelstring | undefinedProperty
Accessible label announced for the group. Not displayed on screen.
orientationButtonGroupOrientationdefault:'horizontal'Property
Layout direction of the buttons.