Action-Group. Info

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.
Mini-Button-Group Button Link
Anatomy

Anatomy of the component


Number Type Description Optional Info
1 Slot Erlaubt sind alle Button- und Link-Varianten No
2 Slot Erlaubt sind alle Button- und Link-Varianten No
3 Slot Erlaubt sind alle Button- und Link-Varianten Yes

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

 Demo

Playground.

Action 1 Action 2 Action 3
Mode (System Setting) Light Dark Background White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
Horizontal Allocation 3 0 0.
Try it out on Storybook Show HTML
Horizontal Allocation 1 1 1.
Try it out on Storybook Show HTML
Horizontal Allocation 2 0 1.
Try it out on Storybook Show HTML
Horizontal Allocation 1 0 2.
Try it out on Storybook Show HTML
Vertical.
Try it out on Storybook Show HTML
Vertical Full Width.
Try it out on Storybook Show HTML
Horizontal From Large.
Try it out on Storybook Show HTML
Complex.
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

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.

Name Description
Use the unnamed slot to add sbb-block-link or sbb-button elements to the sbb-action-group.