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.

Enthaltene Komponenten

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

Spielwiese

Beispiele

The sbb-action-group component is a generic content container which can contain up to three action items
(sbb-button or sbb-block-link or other HTML elements)
in various allocations.

Style

Orientation

The orientation property is used to set item's orientation.
Possible values are horizontal (default) and vertical.

The optional property horizontalFrom can be used in combination with orientation='vertical' to
indicate the minimum breakpoint from which the orientation changes to horizontal.

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

Button-size and link-size

The two props button-size and link-size can be used to override, respectively, the size of the inner sbb-button and sbb-block-link.
The accepted values are s, m and l (default) for sbb-button and xs, s and m (default) for sbb-block-link.

<sbb-action-group button-size="m" link-size="s">
  <sbb-secondary-button>Action 1</sbb-secondary-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>

Align-group and align-self

The align-group property can be used to set the default alignment of the contained elements;
possible values are start, center, stretch and end.

It is also possible to set the align-self attribute on action items in order to move them in the
opposite direction to the group; possible values are start, center or end.

NOTE: The sbb-action-group will only accept block-link and will sync the linkSize
property with nested sbb-block-link and the buttonSize property with the nested sbb-button
instances.

<sbb-action-group align-group="end">
  <sbb-secondary-button align-self="start">Action 1</sbb-secondary-button>
  <sbb-secondary-button>Action 2</sbb-secondary-button>
  <sbb-button>Action 3</sbb-button>
</sbb-action-group>

Allocations

Items can be displayed inside sbb-action-group in different allocations.

If we define the triad x-y-z as the number of elements aligned at the start, at the center and at the end of the component,
and we consider a template like the following one (possibly removing the link for 2-elements allocations):

<sbb-action-group>
  <sbb-button>Button 1</sbb-button>
  <sbb-button>Button 2</sbb-button>
  <sbb-block-link
    icon-name="chevron-small-left-small"
    href="https://github.com/sbb-design-systems/lyne-components"
  >
    Link
  </sbb-block-link>
</sbb-action-group>

The values for align-group and align-self for the various allocations are as follows:

Horizontal

Vertical

Properties

Slots