sp-button-group

NPM 1.0.1

View Storybook

Try it on webcomponents.dev
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? Try it on webcomponents.dev

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.

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)

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