# Action-Group

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Container
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/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

## Elemente

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

## Verwandte Komponenten

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

## Übersicht

### Was macht die Komponente?
Eine Action-Group ordnet [Buttons](https://digital.sbb.ch/de/design-system/lyne/components/button/) und [Links](https://digital.sbb.ch/de/design-system/lyne/components/link/) zusammen an. So werden verwandte Aktionen gebündelt und einheitlich dargestellt.

### Wann soll die Komponente eingesetzt werden?
* Um mehrere zusammengehörige Aktionen kompakt und übersichtlich darzustellen.
* Um verwandte Aktionen für die Benutzerführung zu gruppieren.

### Regeln.
* Die Reihenfolge ist logisch: Aktionen, die den Prozess fortführen, stehen rechts. Aktionen wie «Zurück» oder «Abbrechen» stehen links.
* Es gibt nur einen Primary-Button.
* Erlaubt sind Buttons und Block-Links in allen Varianten.
* Auf kleinen Bildschirmen können die Elemente untereinander und in voller Breite angeordnet werden.

## Implementation (Web Components, Englisch)

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, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/action-group/api.md