sp-button-group

NPM 1.7.0

View Storybook
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

See it on NPM! How big is this package in your project?

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 vertical boolean false

Slots

Name Description default slot the sp-button elements that make up the group

Patch Changes

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

1.6.0

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)