Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lyne Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Base Components Overview Base Components Overview Releases Design Tokens Komponenten Overview Base Informationen Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons Action-Group Implementation

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/lyne-design-system/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.
Default values are l for sbb-button and m 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/lyne-design-system/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/lyne-design-system/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

orientation='horizontal' align-group align-self
3-0-0 start /
1-1-1 start Button 2: 'center'
2-0-1 start Link: 'end'
1-0-2 end Button 1: 'start'
2-0-0 start /
1-0-1 start Button 2: 'end'

Vertical

orientation='vertical' align-group align-self
3-0-0 start /
2-0-0 start /
0-3-0 center /
0-2-0 center /
0-0-3 end /
0-0-2 end /
orientation='vertical' (full width) align-group align-self
3-0-0 stretch Link: 'start'
2-0-0 stretch /
0-3-0 stretch Link: 'center'
0-2-0 stretch /
0-0-3 stretch Link: 'end'
0-0-2 stretch /

Properties

Name Attribute Privacy Type Default Description
alignGroup align-group public 'start' | 'center' | 'stretch' | 'end' 'start' Set the slotted <sbb-action-group> children's alignment.
horizontalFrom horizontal-from public SbbHorizontalFrom 'medium' Overrides the behaviour of orientation property.
orientation orientation public SbbOrientation 'horizontal' Indicates the orientation of the components inside the <sbb-action-group>.
buttonSize button-size public SbbButtonSize 'l' Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances.
linkSize link-size public SbbLinkSize 'm' Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances.

Slots

Name Description
Use the unnamed slot to add sbb-block-link or sbb-button elements to the sbb-action-group.
Examples
Horizontal Allocation 3 0 0
Horizontal Allocation 1 1 1
Horizontal Allocation 2 0 1
Horizontal Allocation 1 0 2
Horizontal Allocation 2 0 0
Horizontal Allocation 1 0 1
Vertical Allocation 3 0 0
Vertical Allocation 2 0 0
Vertical Allocation 0 3 0
Vertical Allocation 0 2 0
Vertical Allocation 0 0 3
Vertical Allocation 0 0 2
Vertical Allocation 3 0 0 Full Width
Vertical Allocation 2 0 0 Full Width
Vertical Allocation 0 3 0 Full Width
Vertical Allocation 0 2 0 Full Width
Vertical Allocation 0 0 3 Full Width
Vertical Allocation 0 0 2 Full Width
Vertical To Horizontal 3 0 0
Horizontal Allocation Size S 3 0 0
Vertical Allocation Size S 3 0 0
HTML-Markup kopiert.
Playground
Action 1Action 2Action 3
Button Grösse M L Ausrichtung Links Zentriert Rechts Verteilt / Stretched Horizontale Darstellung ab Keine horizontale Verteilung Zero Micro Small Medium Large Wide Ultra Hintergrund White Milk Iron Charcoal Black
Imprint Contact Cookie settings