Preview.

What does the component do?

An action group arranges buttons and links 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.

Similar component.

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.

Specification.

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Documentation.

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>

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

class: SbbActionGroupElement, sbb-action-group.

Slots.