sp-button-group

Overview

API

Changelog

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.

Attributes and Properties

Property

Attribute

Type

Default

Description

vertical

boolean

false

Slots

Name

Description

default slot

the sp-button elements that make up the group

Patch Changes

Updated dependencies [00eb0a8]:
- @spectrum-web-components/button@1.6.0
- @spectrum-web-components/base@1.6.0

1.5.0

Patch Changes

#5271 165a904 Thanks @renovate! - Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.
Updated dependencies [4e06533]:
- @spectrum-web-components/button@1.5.0
- @spectrum-web-components/base@1.5.0

1.4.0

Patch Changes

Updated dependencies []:
- @spectrum-web-components/button@1.4.0
- @spectrum-web-components/base@1.4.0

1.3.0

Patch Changes

Updated dependencies []:
- @spectrum-web-components/button@1.3.0
- @spectrum-web-components/base@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/button-group

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/button-group

1.1.1 (2025-01-29)

Features

sp-button-group: sp-button-group react to size updates (#5037) (63bc618)

1.1.0 (2025-01-29)

Bug Fixes

lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

Features

sp-button-group: sp-button-group react to size updates (#5037) (63bc618)

1.0.3 (2024-12-09)

Note: Version bump only for package @spectrum-web-components/button-group

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/button-group

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/button-group

0.49.0 (2024-10-15)

Note: Version bump only for package @spectrum-web-components/button-group

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/button-group

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/button-group

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/button-group

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/button-group

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/button-group

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/button-group

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/button-group

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/button-group

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/button-group

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/button-group

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/button-group

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/button-group

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/button-group

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/button-group

0.42.0 (2024-03-19)

Features

asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/button-group

0.41.1 (2024-02-22)

Note: Version bump only for package @spectrum-web-components/button-group

0.41.0 (2024-02-13)

Note: Version bump only for package @spectrum-web-components/button-group

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/button-group

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/button-group

0.40.3 (2024-01-11)

Note: Version bump only for package @spectrum-web-components/button-group

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/button-group

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/button-group

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/button-group

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/button-group

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/button-group

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/button-group

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/button-group

0.39.0 (2023-09-25)

Bug Fixes

alert-dialog: add Alert Dialog package (#3501) (1062847)

0.38.0 (2023-09-05)

Note: Version bump only for package @spectrum-web-components/button-group

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/button-group

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/button-group

0.35.0 (2023-07-31)

Note: Version bump only for package @spectrum-web-components/button-group

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/button-group

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/button-group

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/button-group

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/button-group

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/button-group

0.30.0 (2023-05-03)

Bug Fixes

include default export in the "exports" fields (f32407d)
include the "types" entry in package.json files (b432f59)
update latest Spectrum CSS beta releases (d8d3acc)
update side effect listings (8160d3a)
update to latest spectrum-css packages (a5ca19f)
use latest @spectrum-css/* versions (c35eb86)

Features

adopt DNA@7 base Spectrum CSS (e08cafd)
button-group: add ButtonGroup pattern (c4d85b5)
button-group: update spectrum css input (d8b1218)
button-group: use core tokens and add t-shirt sizing (960e972)
include all Dev Mode files in side effects (f70817c)
leverage "exports" field in package.json (321abd7)
shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
update to Spectrum CSS v3.0.0 (e8b3d8f)
use latest exports specification (a7ecf4b)

0.10.11 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/button-group

0.10.10 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/button-group

0.10.9 (2023-03-22)

Note: Version bump only for package @spectrum-web-components/button-group

0.10.8 (2023-03-08)

Note: Version bump only for package @spectrum-web-components/button-group

0.10.7 (2023-02-13)

Note: Version bump only for package @spectrum-web-components/button-group

0.10.6 (2023-02-08)

Note: Version bump only for package @spectrum-web-components/button-group

0.10.5 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/button-group

0.10.4 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/button-group

0.10.3 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/button-group

0.10.2 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/button-group

0.10.1 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/button-group

0.10.0 (2022-10-28)

Features

button-group: use core tokens and add t-shirt sizing (960e972)

0.9.0 (2022-08-09)

Features

include all Dev Mode files in side effects (f70817c)

0.8.12 (2022-08-04)

Note: Version bump only for package @spectrum-web-components/button-group

0.8.11 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/button-group

0.8.10 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/button-group

0.8.9 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/button-group

0.8.8 (2022-05-27)

Note: Version bump only for package @spectrum-web-components/button-group

0.8.7 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/button-group

0.8.6 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/button-group

0.8.5 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/button-group

0.8.4 (2022-03-04)

Note: Version bump only for package @spectrum-web-components/button-group

0.8.3 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/button-group

0.8.2 (2022-01-26)

Note: Version bump only for package @spectrum-web-components/button-group

0.8.1 (2021-12-13)

Note: Version bump only for package @spectrum-web-components/button-group

0.8.0 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/button-group

0.7.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/button-group

0.7.0 (2021-11-02)

Features

adopt DNA@7 base Spectrum CSS (e08cafd)

0.6.10 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/button-group

0.6.9 (2021-08-24)

Note: Version bump only for package @spectrum-web-components/button-group

0.6.8 (2021-07-22)

Note: Version bump only for package @spectrum-web-components/button-group

0.6.7 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/button-group

0.6.6 (2021-05-12)

Note: Version bump only for package @spectrum-web-components/button-group

0.6.5 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/button-group

0.6.4 (2021-03-29)

Note: Version bump only for package @spectrum-web-components/button-group

0.6.3 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/button-group

0.6.2 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/button-group

0.6.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/button-group

0.6.0 (2021-03-04)

Features

use latest exports specification (a7ecf4b)

0.5.3 (2021-02-11)

Bug Fixes

update to latest spectrum-css packages (a5ca19f)

0.5.2 (2021-02-02)

Note: Version bump only for package @spectrum-web-components/button-group

0.5.1 (2021-01-28)

Note: Version bump only for package @spectrum-web-components/button-group

0.5.0 (2021-01-21)

Bug Fixes

include the "types" entry in package.json files (b432f59)
update latest Spectrum CSS beta releases (d8d3acc)
use latest @spectrum-css/* versions (c35eb86)

Features

button-group: update spectrum css input (d8b1218)

0.4.0 (2021-01-13)

Bug Fixes

include the "types" entry in package.json files (b432f59)
update latest Spectrum CSS beta releases (d8d3acc)
use latest @spectrum-css/* versions (c35eb86)

Features

button-group: update spectrum css input (d8b1218)

0.3.4 (2020-10-12)

Note: Version bump only for package @spectrum-web-components/button-group

0.3.3 (2020-10-12)

Bug Fixes

include default export in the "exports" fields (f32407d)

0.3.2 (2020-09-25)

Bug Fixes

update side effect listings (8160d3a)

0.3.1 (2020-09-14)

Note: Version bump only for package @spectrum-web-components/button-group

0.3.0 (2020-08-31)

Features

update to Spectrum CSS v3.0.0 (e8b3d8f)

0.2.4 (2020-08-19)

Note: Version bump only for package @spectrum-web-components/button-group

0.2.3 (2020-07-27)

Note: Version bump only for package @spectrum-web-components/button-group

0.2.2 (2020-07-24)

Note: Version bump only for package @spectrum-web-components/button-group

0.2.1 (2020-07-22)

Note: Version bump only for package @spectrum-web-components/button-group

0.2.0 (2020-07-17)

Features

leverage "exports" field in package.json (321abd7)

0.1.0 (2020-06-08)

Features

button-group: add ButtonGroup pattern (c4d85b5)

Spectrum Web Components

sp-button-group

API

Attributes and Properties

Slots

Spectrum
Web Components