@spectrum-web-components/button-group

Overview

sp-button-group delivers a set of buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons.

Usage

yarn add @spectrum-web-components/button-group

Import the side effectful registration of <sp-button-group> via:

import '@spectrum-web-components/button-group/sp-button-group.js';

When looking to leverage the ButtonGroup base class as a type and/or for extension purposes, do so via:

import { ButtonGroup } from '@spectrum-web-components/button-group';

Options

A button group can be either horizontal or vertical in its orientation. By default, a button group is horizontal. Use vertical option when horizontal space is limited.

Horizontal

<sp-button-group>
    <sp-button>Button 1</sp-button>
    <sp-button>Longer Button 2</sp-button>
    <sp-button>Short 3</sp-button>
</sp-button-group>

Vertical

<sp-button-group vertical>
    <sp-button>Button 1</sp-button>
    <sp-button>Longer Button 2</sp-button>
    <sp-button>Short 3</sp-button>
</sp-button-group>

Accessibility

Review the guidelines for the button children.

Changelog

1.5.0 (2025-04-15)

Bug Fixes

• sp-tabs: ensure tabs become enabled when parent disabled attribute is removed (#5323) (c7efe314c5)
• sp-color-field: color handle positioning within scrollable containers (#5322) (e19e55f6f1)
• sp-menu: fixes larger margin in menu-item (#5350) (86bcd12200)
• sp-menu: menuitem now correctly focus and applies hover styles (#5270) (a69accb8b4)
• sp-menu: captures touchend events on mobile (#5313) (4c2f908a92)
• overlay: prevent overlay close on document scroll (#5308) (8f8735c9ec)
• sp-number-field: prevent keyboard on mobile devices by setting inpu… (#5284) (5a3bc6d24e)