What does the component do?

An action-group is a group of elements composed of buttons and links that are arranged together to bundle related actions and enable standardised usage.

When should the component be used?

• To display several related actions compactly and clearly.
• To improve user guidance by grouping related actions.
• To save space and optimise the information architecture.

Rules

• An action-group should consist of at least two and a maximum of three elements.
• The positioning of the elements inside the action group should fit smoothly into the overall design of the page.
• The order of the elements should be logical and user-friendly. Actions that continue the process should be displayed on the right, actions like "back" or "cancel" should be displayed on the left.
• There should only be one primary button.

Child Components

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

Playground

Examples

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