SButtonGroup <s-button-group>

Ordnet eine Gruppe zusammengehöriger Buttons gemeinsam an, etwa eine primäre Aktion und ihre sekundären Aktionen. SButtonGroup ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-button-group>.

import { SButtonGroup } from 'polaris-vue-elements'

Best Practices

• Zusammengehörige Aktionen bündeln. Gruppieren Sie Calls to Action, die zur selben Aufgabe gehören, damit Händler ihre Optionen und deren Zusammenhang erkennen.
• Visuelle Hierarchie wahren. Verwenden Sie variant="primary" für den Button der Hauptaktion und variant="secondary" oder variant="tertiary" für die unterstützenden, um die Aufmerksamkeit zu lenken.
• Nicht zu viele Buttons hinzufügen. Eine lange Reihe von Optionen überfordert Händler und erschwert die Entscheidung.
• Segmentierte Gruppe für Umschalter verwenden. Für eng verwandte Optionen, etwa zum Wechseln von Ansichten oder Filtern, verbindet gap="none" die Buttons zu einem segmentierten Control.
• Destruktive Aktionen absetzen. Platzieren Sie sie mit Bedacht und geben Sie ihnen tone="critical", damit sie nicht versehentlich ausgelöst werden.

<SButtonGroup gap="none">
  <SButton>List</SButton>
  <SButton>Grid</SButton>
</SButtonGroup>

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-button-group> (auf Englisch).

Beispiel

SaveCancelDiscard

ListGrid

<script setup>
import { SButton, SButtonGroup, SPressButton } from 'polaris-vue-elements'
</script>

<template>
  <!-- primary-action accepts a single variant="primary" button; secondary-actions
       accepts Button (variant "secondary" or "auto") and PressButton (variant
       "secondary", its default) elements. The default slot is NOT rendered by the
       underlying <s-button-group> — content without one of these slots silently
       disappears. -->
  <SButtonGroup>
    <template #primary-action>
      <SButton variant="primary">Save</SButton>
    </template>
    <template #secondary-actions>
      <SButton variant="secondary">Cancel</SButton>
      <SButton variant="secondary">Discard</SButton>
    </template>
  </SButtonGroup>

  <!-- Segmented toggle: gap="none" joins the buttons. primary-action is not
       supported with gap="none", so every button goes in secondary-actions. -->
  <SButtonGroup gap="none" accessibilityLabel="View style">
    <template #secondary-actions>
      <SPressButton>List</SPressButton>
      <SPressButton pressed>Grid</SPressButton>
    </template>
  </SButtonGroup>
</template>

Props

Prop	Typ	Beschreibung
accessibilityLabel	string	Ein Label, das den Zweck oder Inhalt der Komponente für assistive Technologien wie Screenreader beschreibt. Damit lässt sich zusätzlicher Kontext bereitstellen, wenn der sichtbare Inhalt allein den Zweck der Komponente nicht klar vermittelt.
gap	"base" | "none"	Der Abstand zwischen den Buttons in der Gruppe. - base: Standardabstand, der die Buttons visuell klar voneinander trennt. - none: Kein Abstand, sodass eine verbundene Button-Gruppe entsteht.

Slots

Slot	Beschreibung
default	Die Buttons innerhalb der Button-Group-Komponente, die als zusammenhängende Gruppe verwandter Aktionen angeordnet sind.
primary-action	Die Hauptaktion dieser Gruppe, mit starker visueller Hervorhebung angezeigt. Akzeptiert einen einzelnen Button mit variant="primary". Verwenden Sie dies für die primäre Aktion, die Benutzer ausführen sollen. Kann nicht zusammen mit gap="none" verwendet werden.
secondary-actions	Unterstützende Aktionen, die weniger betont als die primäre Aktion angezeigt werden. Akzeptiert eine oder mehrere Button-Komponenten mit variant="secondary" oder variant="auto". Für alternative oder weniger wichtige Aktionen verwenden.