# Action-Group

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: one element
- Categories: Container
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/design-system/lyne/components/action-group/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-action-group--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/action-group/overview (API: https://lyne-angular.app.sbb.ch/angular/components/action-group/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-10
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/action-group

## Elements

- `sbb-action-group`: It can be used as a container for one or more action element, like `sbb-button` or `sbb-block-link`.

## Related components

- Similar: [Button](https://digital.sbb.ch/en/design-system/lyne/components/button/index.md)

## Overview

### What does the component do?
An action group arranges [buttons](https://digital.sbb.ch/en/design-system/lyne/components/button/) and [links](https://digital.sbb.ch/en/design-system/lyne/components/link/) together. This bundles related actions and displays them consistently.

### When should the component be used?
* To display several related actions compactly and clearly.
* To group related actions for user guidance.

### Rules.
* The order is logical: actions that continue the process are on the right. Actions like "Back" or "Cancel" are on the left.
* There is only one primary button.
* Buttons and block links are allowed in all variants.
* On small screens, the elements can be stacked and displayed at full width.

## Implementation (web components)

The `<sbb-action-group>` component is a generic content container for action items such as
[sbb-button](https://lyne-elements.app.sbb.ch/?path=/docs/elements-button--docs), [sbb-block-link](https://lyne-elements.app.sbb.ch/?path=/docs/elements-link--docs) or other HTML elements.

### Style

The `sbb-action-group` behaves like a standard flex element. It can be customized
via CSS rules directly on the `<sbb-action-group>` element or on the slotted action elements.

A set of CSS classes is available for common layout configurations such as vertical orientation
items and responsive breakpoint variants
(the complete list is available in the [layout](https://lyne-elements.app.sbb.ch/?path=/docs/guides-layout--docs#flex) documentation).

```html
<sbb-action-group class="sbb-orientation-horizontal-from-small">
  <sbb-secondary-button>Action 1</sbb-secondary-button>
  <sbb-button>Action 2</sbb-button>
  <sbb-block-link
    icon-name="chevron-small-left-small"
    href="https://github.com/sbb-design-systems/lyne-components"
  >
    Action 3
  </sbb-block-link>
</sbb-action-group>
```

Adding the `sbb-orientation-vertical-full-width` class switches the group to a vertical column layout
where each action item stretches to the full width of the container.

```html
<sbb-action-group class="sbb-orientation-vertical-full-width">
  <sbb-secondary-button>Action 1</sbb-secondary-button>
  <sbb-button>Action 2</sbb-button>
</sbb-action-group>
```

## API (web components)

Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/action-group/api.md