## 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!](https://img.shields.io/npm/v/@spectrum-web-components/action-group?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-group) [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-group?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-group) [![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-xskzaswz) ``` yarn add @spectrum-web-components/action-group ``` Import the side effectful registration of `` 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 ```html demo Extra Small 1 Extra Small 2 ``` Small ```html demo Small 1 Small 2 ``` Medium ```html demo Medium 1 Medium 2 ``` Large ```html demo Large 1 Large 2 ``` Extra Large ```html demo Extra Large 1 Extra Large 2 ``` ## Selects An `` will manage a `selected` property that consists on an array of the `` children that are currently selected. A `change` event is dispatched from the `` 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 `` element. You can also associate the `` 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 `` will manage its `` children as "radio buttons" allowing the user to select a _single_ one of the buttons presented. The `` children will only be able to turn their `selected` value on while maintaining a single selection after an initial selection is made. ```html Button 1 Longer Button 2 Short 3 ``` ### Multiple An `` will manage its `` children as "checkboxes" allowing the user to select a _multiple_ of the buttons presented. The `` children will toggle their `selected` value on and off when clicked successively. ```html Button 1 Longer Button 2 Short 3 ``` ## 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 `` a controllable component. Though `selected` would more commonly be set via Javascript expressions (i.e. ``), it is also possible to set `selected` as a JSON string. ```html First Second ``` By default, an `` 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. ```html First Second Third ``` 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. ```html First Second Third ``` ## Horizontal By default, an `` will organize its child buttons horizontally and the delivery of those buttons can be modified with the `compact`, `emphasized`, or `quiet` attributes. ```html Button 1 Longer Button 2 Short 3
Button 1 Longer Button 2 Short 3

``` ## Vertical The use of the `vertical` attribute instructs the `` element to organize its child buttons vertically, while accepting the same `compact`, `emphasized`, and `quiet` attributes as modifiers. ```html
Button 1 Longer Button 2 Short 3 Button 1 Longer Button 2 Short 3
``` ## Justified The `justified` attribute will cause the `` element to fill the available horizontal space and evenly distribute that space across its child button elements. ```html Button 1 Longer Button 2 Short 3
Button 1 Longer Button 2 Short 3

``` ## Accessibility The accessibility `role` for an `` element depends on the manner in which items are selected. By default, `` will have `role="radiogroup"`, because it manages its children as a "radio group", while `` or `` 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 `` elements are combined together with in a toolbar, the `role` attribute for `` or `` 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: ```html
```