Was macht die Komponente?

Eine Action-Group ist eine Gruppe von Elementen wie Buttons und Links, die zusammen angeordnet werden, um verwandte Aktionen zu bündeln und eine einheitliche Bedienung zu ermöglichen.

Wann soll die Komponente eingesetzt werden?

• Um mehrere zusammenhängende Aktionen kompakt und übersichtlich darzustellen.
• Um die Benutzerführung zu verbessern, indem verwandte Aktionen gruppiert werden.
• Um Platz zu sparen und die Informationsarchitektur zu optimieren.

Regeln.

• Eine Action-Group soll aus mindestens zwei und maximal drei Elementen bestehen.
• Die Anordnung der Elemente innerhalb der Action-Group soll sich harmonisch in das Gesamtdesign der Seite einfügen.
• Die Reihenfolge der Elementen soll logisch und benutzerfreundlich sein. Aktionen die den Prozess fortführen werden eher rechts dargestellt, Aktionen wie "Zurück" oder "Abbrechen" werden eher links dargestellt.
• Es soll nur ein Primary-Button eingesetzt werden.

Die Action-Group besteht aus zwei oder drei Aktionselementen (Button oder Link). Die Varianten der Button oder Links sind frei wählbar.

Spielwiese.

The <sbb-action-group> component is a generic content container for action items such as
sbb-button, sbb-block-link 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 documentation).

<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.

<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 Documentation.

class: SbbActionGroupElement, sbb-action-group.

Slots.