sp-action-group

NPM

1.0.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description compact compact boolean false emphasized emphasized boolean false justified justified boolean false label label string '' quiet quiet boolean false selects selects undefined | 'single' | 'multiple' staticColor static-color 'white' | 'black' | undefined vertical vertical boolean false

Slots #

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

Events #

Name Type Description change Event Announces that selection state has been changed by user

1.0.0 (2024-10-31) #

BREAKING CHANGES #

  • remove deprecated 'static' references (#4818)

0.49.0 (2024-10-15) #

Features #

  • add static-color to replace static (#4808) (43cf086)

0.48.1 (2024-10-01) #

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

0.48.0 (2024-09-17) #

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

0.47.2 (2024-09-03) #

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

0.47.1 (2024-08-27) #

Bug Fixes #

  • reactive-controllers: update focusable element's tab-index to 0 on accepting focus (#4630) (d359e84)

0.47.0 (2024-08-20) #

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

0.46.0 (2024-08-08) #

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

0.45.0 (2024-07-30) #

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

0.44.0 (2024-07-15) #

Features #

  • action-bar: support for action-menus (#3780) (4aff599)

0.43.0 (2024-06-11) #

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

0.42.5 (2024-05-24) #

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

0.42.4 (2024-05-14) #

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

0.42.3 (2024-05-01) #

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

0.42.2 (2024-04-03) #

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

0.42.1 (2024-04-02) #

Bug Fixes #

  • shared: ensure the "updateComplete" in Focusable is stable (885b4a5)

0.42.0 (2024-03-19) #

Bug Fixes #

  • action-group: manage Action Button selection through multiple slots (4d02b46)
  • button: prevent pointer interaction of child/slotted content (2cd5823)
  • styles, theme: surface exports that omit Spectrum Vars proactively (#4142) (5b524c1)

Features #

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

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

0.41.1 (2024-02-22) #

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

0.41.0 (2024-02-13) #

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

0.40.5 (2024-02-05) #

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

0.40.4 (2024-01-29) #

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

0.40.3 (2024-01-11) #

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

0.40.2 (2023-12-18) #

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

0.40.1 (2023-12-05) #

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

0.40.0 (2023-11-16) #

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

0.39.4 (2023-11-02) #

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

0.39.3 (2023-10-18) #

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

0.39.2 (2023-10-13) #

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

0.39.1 (2023-10-06) #

Bug Fixes #

  • action-button: allow change events to bubble and pierce shadowdom (#3614) (3f76e04)

0.39.0 (2023-09-25) #

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

0.38.0 (2023-09-05) #

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

0.37.0 (2023-08-18) #

Features #

  • picker,action-group,split-button: leverage Overlay v2 (170a223)

0.36.0 (2023-08-18) #

Bug Fixes #

  • action-group: separate first selection management from later selection management (783b206)

0.35.0 (2023-07-31) #

Features #

  • action-bar: use core tokens (4e21edf)

0.34.0 (2023-07-11) #

Bug Fixes #

  • action-group: ensure Action Button clicks are attributed to the right element (#3292) (ddccab7)

0.33.2 (2023-06-14) #

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

0.33.0 (2023-06-08) #

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

0.32.0 (2023-06-01) #

Bug Fixes #

  • action-group: update application/management of "role" on group and buttons (533873b), closes #3221 #3221 #3221

0.31.0 (2023-05-17) #

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

0.30.0 (2023-05-03) #

Bug Fixes #

  • action-group: add custom focus() method and use sendKeys for correct "Enter" key testing (638aa35)
  • action-group: allow direct setting aria-label on first update (84f7fdd)
  • action-group: allow for initial button being "disabled" (a1e3939)
  • action-group: allow quiet and emphasized attributes to be passed to slotted action buttons (aadfddb)
  • action-group: pass styles to nested children, too (12f1be3)
  • action-group: support ActionButtons that are not direct children (1d4efd5)
  • action-group: use the correct role for buttons when not selects (0aae8ed)
  • correct @element jsDoc listing across library (c97a632)
  • ensure that "selected" can be set more than once from the outside (5f1996c)
  • include default export in the "exports" fields (f32407d)
  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • textfield: respect type=text|url|tel|email|password (1b7a59a)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • update side effect listings (8160d3a)
  • update to latest spectrum-css packages (a5ca19f)
  • use icons without "size" values (3fc7c91)
  • use latest @spectrum-css/* versions (c35eb86)

Features #

  • action-button: add action button pattern (03ac00a)
  • action-group: add action-group pattern (d2de766)
  • action-group: manage "one" and "multiple" selections (6fad59e)
  • action-group: update spectrum css input (9840b19)
  • action-group: use core tokens (73f3b51)
  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • button: use synthetic button instead of native (49e94bc)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • include all Dev Mode files in side effects (f70817c)
  • leverage latest Spectrum button API (9caf2f6)
  • modified .selected to make a controllable component (#2006) (4c69b25)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • support Spectrum Token consumption and update Action Button to use them (743ab16)
  • theme: filter css variables (1761f3a)
  • update lit-* dependencies, wip (377f3c8)
  • use latest exports specification (a7ecf4b)

Performance Improvements #

  • reorganize inheritance and composition in Menu Items (d96ccb6)

0.12.12 (2023-04-24) #

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

0.12.11 (2023-04-05) #

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

0.12.10 (2023-03-22) #

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

0.12.9 (2023-03-08) #

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

0.12.8 (2023-02-13) #

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

0.12.7 (2023-02-08) #

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

0.12.6 (2023-01-23) #

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

0.12.5 (2023-01-09) #

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

0.12.4 (2022-12-08) #

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

0.12.3 (2022-11-21) #

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

0.12.2 (2022-11-14) #

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

0.12.1 (2022-10-28) #

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

0.12.0 (2022-10-17) #

Features #

  • action-group: use core tokens (73f3b51)

0.11.3 (2022-10-10) #

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

0.11.2 (2022-09-14) #

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

0.11.1 (2022-08-24) #

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

0.11.0 (2022-08-09) #

Features #

  • include all Dev Mode files in side effects (f70817c)

0.10.1 (2022-08-04) #

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

0.10.0 (2022-07-18) #

Features #

  • support Spectrum Token consumption and update Action Button to use them (743ab16)

0.9.0 (2022-06-29) #

Features #

  • theme: filter css variables (1761f3a)

0.8.6 (2022-06-07) #

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

0.8.5 (2022-05-27) #

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

0.8.4 (2022-05-12) #

Bug Fixes #

  • ensure that "selected" can be set more than once from the outside (5f1996c)

0.8.3 (2022-04-21) #

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

0.8.2 (2022-03-30) #

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

0.8.1 (2022-03-08) #

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

0.8.0 (2022-03-04) #

Features #

  • leverage latest Spectrum button API (9caf2f6)

0.7.2 (2022-02-22) #

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

0.7.1 (2022-02-02) #

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

0.7.0 (2022-01-26) #

Features #

  • modified .selected to make a controllable component (#2006) (4c69b25)

0.6.2 (2022-01-07) #

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

0.6.1 (2021-12-13) #

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

0.6.0 (2021-11-08) #

Features #

  • update lit-* dependencies, wip (377f3c8)

0.5.1 (2021-11-08) #

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

0.5.0 (2021-11-02) #

Bug Fixes #

  • textfield: respect type=text|url|tel|email|password (1b7a59a)

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.4.18 (2021-10-12) #

Bug Fixes #

  • action-group: allow quiet and emphasized attributes to be passed to slotted action buttons (aadfddb)

0.4.17 (2021-10-05) #

Bug Fixes #

  • action-group: add custom focus() method and use sendKeys for correct "Enter" key testing (638aa35)

0.4.16 (2021-09-20) #

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

0.4.15 (2021-09-13) #

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

0.4.14 (2021-08-24) #

Bug Fixes #

  • correct @element jsDoc listing across library (c97a632)

Performance Improvements #

  • reorganize inheritance and composition in Menu Items (d96ccb6)

0.4.13 (2021-08-03) #

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

0.4.12 (2021-07-22) #

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

0.4.11 (2021-07-01) #

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

0.4.10 (2021-06-16) #

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

0.4.9 (2021-06-07) #

Bug Fixes #

  • action-group: pass styles to nested children, too (12f1be3)

0.4.8 (2021-05-24) #

Bug Fixes #

  • action-group: allow direct setting aria-label on first update (84f7fdd)
  • action-group: use the correct role for buttons when not selects (0aae8ed)

0.4.7 (2021-05-12) #

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

0.4.6 (2021-04-15) #

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

0.4.5 (2021-04-09) #

Bug Fixes #

  • action-group: allow for initial button being "disabled" (a1e3939)

0.4.4 (2021-03-29) #

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

0.4.3 (2021-03-22) #

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

0.4.2 (2021-03-22) #

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

0.4.1 (2021-03-05) #

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

0.4.0 (2021-03-04) #

Bug Fixes #

  • action-group: support ActionButtons that are not direct children (1d4efd5)

Features #

  • use latest exports specification (a7ecf4b)

0.3.3 (2021-02-11) #

Bug Fixes #

  • update to latest spectrum-css packages (a5ca19f)

0.3.2 (2021-02-02) #

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

0.3.1 (2021-01-28) #

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

0.3.0 (2021-01-21) #

Bug Fixes #

  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use icons without "size" values (3fc7c91)
  • use latest @spectrum-css/* versions (c35eb86)

Features #

  • action-button: add action button pattern (03ac00a)
  • action-group: manage "one" and "multiple" selections (6fad59e)
  • action-group: update spectrum css input (9840b19)
  • button: use synthetic button instead of native (49e94bc)
  • icons-workflow: vend fully registered icon components (941f3a4)

0.2.0 (2021-01-13) #

Bug Fixes #

  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use icons without "size" values (3fc7c91)
  • use latest @spectrum-css/* versions (c35eb86)

Features #

  • action-button: add action button pattern (03ac00a)
  • action-group: manage "one" and "multiple" selections (6fad59e)
  • action-group: update spectrum css input (9840b19)
  • button: use synthetic button instead of native (49e94bc)
  • icons-workflow: vend fully registered icon components (941f3a4)

0.1.4 (2020-10-12) #

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

0.1.3 (2020-10-12) #

Bug Fixes #

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

0.1.2 (2020-09-25) #

Bug Fixes #

  • update side effect listings (8160d3a)

0.1.1 (2020-09-14) #

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

0.1.0 (2020-08-31) #

Features #

  • action-group: add action-group pattern (d2de766)

Description #

sp-action-group delivers a set of action buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons. The compact attribute merges these buttons so that they are visually joined to clarify their relationship to each other and their distance from other buttons/groups.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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

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

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

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

import { ActionGroup } from '@spectrum-web-components/action-group';

Sizes #

Extra Small 
<sp-action-group size="xs">
    <sp-action-button>Extra Small 1</sp-action-button>
    <sp-action-button>Extra Small 2</sp-action-button>
</sp-action-group>
 Small 
<sp-action-group size="s">
    <sp-action-button>Small 1</sp-action-button>
    <sp-action-button>Small 2</sp-action-button>
</sp-action-group>
 Medium 
<sp-action-group size="m">
    <sp-action-button>Medium 1</sp-action-button>
    <sp-action-button>Medium 2</sp-action-button>
</sp-action-group>
 Large 
<sp-action-group size="l">
    <sp-action-button>Large 1</sp-action-button>
    <sp-action-button>Large 2</sp-action-button>
</sp-action-group>
 Extra Large 
<sp-action-group size="xl">
    <sp-action-button>Extra Large 1</sp-action-button>
    <sp-action-button>Extra Large 2</sp-action-button>
</sp-action-group>

Selects #

An <sp-action-group selects="single|multiple"> will manage a selected property that consists on an array of the <sp-action-button> children that are currently selected. A change event is dispatched from the <sp-action-group> element when the value of selected is updated. This event can be canceled via event.preventDefault(), after which the value of selected will be returned to what it was previously.

When a selection can be made, it is a good idea to supply the group of options with accessible text that names the group of buttons. This can be done in a non-visual way via the label attribute of the <sp-action-group> element. You can also associate the <sp-action-group> to a second, visible DOM element via the aria-labelledby attribute or, when available, via the for attribute on the second element to make the association in the other direction.

Single #

An <sp-action-group selects="single"> will manage its <sp-action-button> children as "radio buttons" allowing the user to select a single one of the buttons presented. The <sp-action-button> children will only be able to turn their selected value on while maintaining a single selection after an initial selection is made.

<sp-action-group
    selects="single"
    emphasized
    label="Single Selection Demo Group"
>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Button 1
    </sp-action-button>
    <sp-action-button selected>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Longer Button 2
    </sp-action-button>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Short 3
    </sp-action-button>
</sp-action-group>

Multiple #

An <sp-action-group selects="multiple"> will manage its <sp-action-button> children as "checkboxes" allowing the user to select a multiple of the buttons presented. The <sp-action-button> children will toggle their selected value on and off when clicked successively.

<sp-action-group
    selects="multiple"
    emphasized
    label="Multiple Selection Demo Group"
>
    <sp-action-button selected>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Button 1
    </sp-action-button>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Longer Button 2
    </sp-action-button>
    <sp-action-button selected>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Short 3
    </sp-action-button>
</sp-action-group>

Selected #

The selected property represents the selection state within a button group. This property can be managed either by the component or by the user. Passing in an array of button values will make <sp-action-group> a controllable component. Though selected would more commonly be set via Javascript expressions (i.e. <sp-action-group .selected=${["first"]}>), it is also possible to set selected as a JSON string.

<sp-action-group selects="single" selected='["first"]'>
    <sp-action-button value="first">First</sp-action-button>
    <sp-action-button value="second">Second</sp-action-button>
</sp-action-group>

By default, an <sp-action-group> will select any button passed into selected. Afterwards, .selects controls how button values are added to the selection state. For example, if .selects is not specified when selected is set, any further interaction will result in no change to the selection.

<sp-action-group selected='["first", "second"]'>
    <sp-action-button value="first">First</sp-action-button>
    <sp-action-button value="second">Second</sp-action-button>
    <sp-action-button value="third">Third</sp-action-button>
</sp-action-group>

Similarly, if selected contains more than one button value, but selects = "single", then those initial buttons will be highlighted, but further interaction will result in radio-button functionality.

<sp-action-group selects="single" selected='["first", "second"]'>
    <sp-action-button value="first">First</sp-action-button>
    <sp-action-button value="second">Second</sp-action-button>
    <sp-action-button value="third">Third</sp-action-button>
</sp-action-group>

Horizontal #

By default, an <sp-action-group> will organize its child buttons horizontally and the delivery of those buttons can be modified with the compact, emphasized, or quiet attributes.

<sp-action-group>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Button 1
    </sp-action-button>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Longer Button 2
    </sp-action-button>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Short 3
    </sp-action-button>
</sp-action-group>
<br />
<sp-action-group compact>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Button 1
    </sp-action-button>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Longer Button 2
    </sp-action-button>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Short 3
    </sp-action-button>
</sp-action-group>
<br />
<sp-action-group quiet>
    <sp-action-button label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-action-button label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-action-button label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</sp-action-group>
<br />
<sp-action-group compact emphasized>
    <sp-action-button label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-action-button label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-action-button label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</sp-action-group>

Vertical #

The use of the vertical attribute instructs the <sp-action-group> element to organize its child buttons vertically, while accepting the same compact, emphasized, and quiet attributes as modifiers.

<div style="display: flex; justify-content: space-around;">
    <sp-action-group vertical>
        <sp-action-button>
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
            Button 1
        </sp-action-button>
        <sp-action-button>
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
            Longer Button 2
        </sp-action-button>
        <sp-action-button>
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
            Short 3
        </sp-action-button>
    </sp-action-group>
    <sp-action-group vertical compact>
        <sp-action-button>
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
            Button 1
        </sp-action-button>
        <sp-action-button>
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
            Longer Button 2
        </sp-action-button>
        <sp-action-button>
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
            Short 3
        </sp-action-button>
    </sp-action-group>
    <sp-action-group vertical quiet>
        <sp-action-button label="Zoom in">
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
        </sp-action-button>
        <sp-action-button label="Zoom in">
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
        </sp-action-button>
        <sp-action-button label="Zoom in">
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
        </sp-action-button>
    </sp-action-group>
    <sp-action-group compact vertical>
        <sp-action-button label="Zoom in">
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
        </sp-action-button>
        <sp-action-button label="Zoom in">
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
        </sp-action-button>
        <sp-action-button label="Zoom in">
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
        </sp-action-button>
    </sp-action-group>
</div>

Justified #

The justified attribute will cause the <sp-action-group> element to fill the available horizontal space and evenly distribute that space across its child button elements.

<sp-action-group justified>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Button 1
    </sp-action-button>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Longer Button 2
    </sp-action-button>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Short 3
    </sp-action-button>
</sp-action-group>
<br />
<sp-action-group justified compact>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Button 1
    </sp-action-button>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Longer Button 2
    </sp-action-button>
    <sp-action-button>
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
        Short 3
    </sp-action-button>
</sp-action-group>
<br />
<sp-action-group justified quiet>
    <sp-action-button label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-action-button label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-action-button label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</sp-action-group>
<br />
<sp-action-group compact justified>
    <sp-action-button label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-action-button label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-action-button label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</sp-action-group>

Accessibility #

The accessibility role for an <sp-action-group> element depends on the manner in which items are selected. By default, <sp-action-group selects="single"> will have role="radiogroup", because it manages its children as a "radio group", while <sp-action-group> or <sp-action-group selects="multiple"> will have role="toolbar", which makes sense for a group of buttons or checkboxes between which one can navigate using the arrow keys.

When more than one <sp-action-group> elements are combined together with in a toolbar, the role attribute for <sp-action-group> or <sp-action-group selects="multiple"> should be overwritten using role="group" or role="presentation", so that toolbars are not nested, as demonstrated in the following example of a hypothetical toolbar for formatting text within a rich text editor:

<div
    aria-label="Text Formatting"
    role="toolbar"
    style="height: 32px; display: flex; gap: 6px"
>
    <sp-action-group
        aria-label="Text Style"
        selects="multiple"
        role="group"
        compact
        emphasized
    >
        <sp-action-button label="Bold" value="bold">
            <sp-icon-text-bold slot="icon"></sp-icon-text-bold>
        </sp-action-button>
        <sp-action-button label="Italic" value="italic">
            <sp-icon-text-italic slot="icon"></sp-icon-text-italic>
        </sp-action-button>
        <sp-action-button label="Underline" value="underline">
            <sp-icon-text-underline slot="icon"></sp-icon-text-underline>
        </sp-action-button>
    </sp-action-group>
    <sp-divider
        size="s"
        style="align-self: stretch; height: auto;"
        vertical
    ></sp-divider>
    <sp-action-group
        aria-label="Text Align"
        selects="single"
        compact
        emphasized
    >
        <sp-action-button label="Left" value="left" selected>
            <sp-icon-text-align-left slot="icon"></sp-icon-text-align-left>
        </sp-action-button>
        <sp-action-button label="Center" value="center">
            <sp-icon-text-align-center slot="icon"></sp-icon-text-align-center>
        </sp-action-button>
        <sp-action-button label="Right" value="right">
            <sp-icon-text-align-right slot="icon"></sp-icon-text-align-right>
        </sp-action-button>
        <sp-action-button label="Justify" value="justify">
            <sp-icon-text-align-justify
                slot="icon"
            ></sp-icon-text-align-justify>
        </sp-action-button>
    </sp-action-group>
    <sp-divider
        size="s"
        style="align-self: stretch; height: auto;"
        vertical
    ></sp-divider>
    <sp-action-group
        aria-label="List Style"
        selects="multiple"
        role="group"
        compact
        emphasized
    >
        <sp-action-button
            label="Bulleted"
            value="bulleted"
            onclick="
                /* makes mutually exclusive checkbox */
                this.selected &&
                    requestAnimationFrame(() => this.parentElement.selected = []);
                this.parentElement.selected = [];
            "
        >
            <sp-icon-text-bulleted slot="icon"></sp-icon-text-bulleted>
        </sp-action-button>
        <sp-action-button
            label="Numbering"
            value="numbering"
            onclick="
                /* makes mutually exclusive checkbox */
                this.selected && 
                    requestAnimationFrame(() => this.parentElement.selected = []);
                this.parentElement.selected = [];
            "
        >
            <sp-icon-text-numbered slot="icon"></sp-icon-text-numbered>
        </sp-action-button>
    </sp-action-group>
    <sp-divider
        size="s"
        style="align-self: stretch; height: auto;"
        vertical
    ></sp-divider>
    <sp-action-group role="presentation" compact>
        <sp-action-button disabled label="Copy" value="copy">
            <sp-icon-copy slot="icon"></sp-icon-copy>
        </sp-action-button>
        <sp-action-button disabled label="Paste" value="paste">
            <sp-icon-paste slot="icon"></sp-icon-paste>
        </sp-action-button>
        <sp-action-button disabled label="Cut" value="cut">
            <sp-icon-cut slot="icon"></sp-icon-cut>
        </sp-action-button>
    </sp-action-group>
</div>