SButton <s-button>

Löst eine Aktion aus oder navigiert, mit den Varianten primary, secondary und tertiary, Icons und einem Ladezustand. SButton ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-button>.

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

Best Practices

• Mit einem klaren Verb beschriften. Sagen Sie genau, was der Button tut, etwa „Save“, „Edit“ oder „Add tags“. Verwenden Sie Satzschreibung (sentence case), lassen Sie Füllwörter wie „a“ oder „the“ weg und verzichten Sie auf Satzzeichen.
• tone="critical" für destruktive Aktionen reservieren. Verwenden Sie ihn nur, wenn sich eine Aktion schwer oder gar nicht rückgängig machen lässt, und wählen Sie den Tone generell danach, wie folgenreich die Aktion ist.
• Hierarchie deutlich machen. Geben Sie der Hauptaktion variant="primary", unterstützenden Aktionen variant="secondary" und ergänzenden variant="tertiary", damit Händler erkennen, welche Aktion am wichtigsten ist.
• Buttons einheitlich platzieren. Setzen Sie Buttons in der gesamten App an dieselben Stellen, damit Händler lernen, wo sie sie finden.
• Reine Icon-Buttons beschriften. Hat ein Button ein Icon, aber keinen Text, geben Sie ihm ein accessibilityLabel, das Screenreader-Nutzern sagt, was er tut.

<SButton icon="edit" accessibilityLabel="Edit product" />

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

Beispiel

PrimarySecondaryTertiaryCritical

LoadingDisabled

Clicked 0 times

<script setup>
import { ref } from 'vue'
import { SButton } from 'polaris-vue-elements'

const clicks = ref(0)
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
    <SButton variant="primary">Primary</SButton>
    <SButton variant="secondary">Secondary</SButton>
    <SButton variant="tertiary">Tertiary</SButton>
    <SButton tone="critical">Critical</SButton>
  </div>
  <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px;">
    <SButton loading>Loading</SButton>
    <SButton disabled>Disabled</SButton>
  </div>
  <div style="margin-top: 8px;">
    <SButton @click="clicks++">Clicked {{ clicks }} times</SButton>
  </div>
</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.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Legt die Aktion fest, die das commandFor-Ziel ausführen soll, wenn dieses klickbare Element aktiviert wird. Welche Aktionen unterstützt werden, steht in der Dokumentation der jeweiligen Komponente. - --auto: eine Standardaktion für die Zielkomponente. - --show: zeigt die Zielkomponente an. - --hide: blendet die Zielkomponente aus. - --toggle: schaltet die Zielkomponente um. - --copy: kopiert das Ziel-ClipboardItem.
commandFor	string	ID einer Komponente, die auf Aktivierungen (z. B. Klicks) dieser Komponente reagieren soll. Siehe command zur Steuerung des Verhaltens des Ziels.
disabled	boolean	Deaktiviert den Button, sodass er weder angeklickt werden noch den Fokus erhalten kann.
download	string	Veranlasst den Browser, die verlinkte URL als Download zu behandeln, wobei der String als Dateiname dient. Download funktioniert nur für Same-Origin-URLs oder die Schemata blob: und data:.
href	string	Die URL, auf die verlinkt wird. - Wenn gesetzt, wird nach Ausführung des click-Events zu dem in href angegebenen Ort navigiert. - Ist ein commandFor gesetzt, wird statt der Navigation das command ausgeführt.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Ein Icon im Button, typischerweise vor dem Button-Text platziert. Icons helfen Nutzern, die Aktion des Buttons schnell zu erkennen, und verbessern die Überfliegbarkeit. Akzeptiert jeden Icon-Namen aus der Icon-Bibliothek oder eine eigene String-Kennung.
inlineSize	"auto" | "fill" | "fit-content"	Die angezeigte Inline-Breite des Buttons. - auto: Die Größe des Buttons hängt von der Oberfläche und dem Kontext ab. - fill: Der Button nimmt 100 % der verfügbaren Inline-Größe ein. - fit-content: Der Button nimmt die minimale Inline-Größe ein, die für seinen Inhalt erforderlich ist.
interestFor	string	ID einer Komponente, die auf Interesse (z. B. Hover und Fokus) an dieser Komponente reagieren soll.
lang	string	Die Sprache des Textinhalts. Verwenden Sie dies, wenn der Text in einer anderen Sprache als der Rest der Seite verfasst ist, damit Hilfstechnologien wie Screenreader die korrekte Aussprache verwenden. Der Wert sollte ein gültiger Sprach-Subtag aus der IANA Language Subtag Registry sein.
loading	boolean	Ersetzt den Inhalt durch eine Ladeanzeige, während eine Hintergrundaktion ausgeführt wird. Deaktiviert außerdem den Button.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Gibt an, wo die verlinkte URL angezeigt werden soll.
tone	"auto" | "neutral" | "critical"	Die semantische Bedeutung und farbliche Gestaltung der Komponente. - critical: Dringende Probleme oder destruktive Aktionen. - auto: Wird automatisch anhand des Kontexts bestimmt. - neutral: Allgemeine Informationen ohne bestimmte Absicht.
type	"button" | "reset" | "submit"	Das Verhalten des Buttons. - submit: Die Komponente fungiert als Submit-Button und sendet das nächstgelegene Formular ab. - button: Die Komponente fungiert als Button ohne Standardaktion. - reset: Die Komponente fungiert als Reset-Button und setzt das nächstgelegene Formular zurück (Felder erhalten wieder ihre Standardwerte). Diese Eigenschaft wird ignoriert, wenn die Komponente href oder commandFor/command unterstützt und eines davon gesetzt ist.
variant	"auto" | "primary" | "secondary" | "tertiary"	Das visuelle Erscheinungsbild der Button-Komponente. - auto: Die Variante wird automatisch anhand des Kontexts der Button-Komponente bestimmt. - primary: Stark hervorgehobener Button für die primäre Aktion auf der Seite. Sparsam einsetzen. - secondary: Mittel hervorgehobener Button für sekundäre Aktionen. - tertiary: Schwach hervorgehobener Button für weniger wichtige Aktionen.

Einige Typspalten oben wurden zur besseren Lesbarkeit gekürzt; die vollständigen Unions finden sich in den generierten TypeScript-Typen der Bibliothek (src/lib/generated/types.ts).

Events

Event	Typ
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

Auf diese Events lauschen Sie mit Listenern im Stil von @blur auf <SButton>.

Slots

Slot	Beschreibung
default	Der Beschriftungstext oder die Elemente innerhalb der Button-Komponente, die die beim Klicken ausgeführte Aktion beschreiben.