# swc-button-group

A button group clusters related actions together, providing consistent spacing, sizing, and orientation.

```js
import '@adobe/spectrum-wc/components/button-group/index.js';
// <swc-button-group></swc-button-group>
```

## Attributes

| Name          | Type                     | Default        | Description                                                                                                                                                                                              |
| ------------- | ------------------------ | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `size`        | `ElementSize`            | -              | The size of the button group and its children.                                                                                                                                                           |
| `orientation` | `ButtonGroupOrientation` | `'horizontal'` | The layout direction of the button group. Note: this property does NOT set `aria-orientation` on the host because `aria-orientation` is only meaningful for roles that manage arrow-key navigation (e.g. |
| `disabled`    | `boolean`                | `false`        | Whether all buttons in the group are disabled. When `true`, forces every slotted button child to `disabled`.                                                                                             |
| `align`       | `ButtonGroupAlignment`   | `'start'`      | The alignment of buttons within the group along the main axis.                                                                                                                                           |

## Slots

| Name        | Description                        |
| ----------- | ---------------------------------- |
| `(default)` | One or more `swc-button` elements. |

## CSS Custom Properties

| Name                                 | Description                                                |
| ------------------------------------ | ---------------------------------------------------------- |
| `--swc-button-group-gap`             | Space between buttons in the group.                        |
| `--swc-button-group-justify-content` | Alignment of buttons within the group along the main axis. |