Schaltflächenkomponente für Stripe-Apps

So fügen Sie Ihrer App die Button Komponente hinzu:

import {Button} from '@stripe/ui-extension-sdk/ui';

Es sind mehrere Schaltflächen-Typen verfügbar:

<Button type="primary">Primary</Button>
<Button>Secondary</Button>
<Button type="destructive">Destructive</Button>

Tasten-Eigenschaften

CSS

Richtlinien für Inhalte

Verwenden Sie für Labels die Wortstruktur {noun} + {verb}

Zum Beispiel Kundin/Kunden aktualisieren. Bei häufigen Aktionen wie Fertig, Schließen, Abbrechen, Hinzufügen oder Löschen kann dieses Muster ignoriert werden.

Verwenden Sie möglichst aussagekräftige Beschreibungen

Falls die Schaltfläche eine Aktion auslöst oder den/die Nutzer/in an einen Standort weiterleitet, sollte diese Aktion bzw. dieser Standort innerhalb des Labels benannt werden.

Verwenden Sie die gemäßigte Großschreibung

Das gilt in den meisten Fällen, mit Ausnahme von Eigennamen und Phrasen.

Zeichensetzung vermeiden

Vermeiden Sie Punkte, Ausrufe- und Fragezeichen.

Verwenden Sie Personalpronomen der zweiten Person

Wenn Sie mit einer Schaltfläche oder einem Link auf Nutzer/innen verweisen, verwenden Sie die Personalpronomen der zweiten Person. Beispiel: Posten Sie Ihren Status.

Primäre Schaltflächen

Primäre Schaltflächen lösen die primäre Aktion auf einer Seite bzw. bei einem Ablauf aus. Nutzer/innen sollte nie mehr als eine primäre Schaltfläche gleichzeitig zur Verfügung stehen.

<Button type="primary" onPress={() => console.log('Button was pressed')}>
  Primary button
</Button>

Sekundäre Schaltflächen

Sekundäre Schaltflächen sind die standardmäßig und am häufigsten verwendeten Schaltflächen in Produktnutzeroberflächen. Im Allgemeinen sollte der sekundäre Typ verwendet werden für Schaltflächen, die keine primären Aktionen auslösen.

<Button onPress={() => console.log('Button was pressed')}>
  Secondary button
</Button>

Destruktive Schaltflächen

Verwenden Sie destruktive Schaltflächen ausschließlich für Aktionen, die zur Zerstörung von Objekten oder Daten führen.

<Button
  type="destructive"
  onPress={() => console.log('Button was pressed')}
>
  Destructive button
</Button>

Schaltflächengrößen

Schaltflächen sind in drei Größen verfügbar, die die Höhe des Elements bestimmen. Schaltflächen können so breit sein, wie es notwendig ist, um ihre Container zu füllen.

• Bei Platzmangel oder zur Anpassung an die Größe sonstiger, kleiner Texte (z. B. rechtliche Bestimmungen) können kleine Schaltflächen verwendet werden.
• Die Standardgröße für Schaltflächen ist „Mittel“.
• Große Schaltflächen können in Situationen verwendet werden, in denen ein CTA (Call to Action) erhöhte Sichtbarkeit benötigt.

<Button size="small">Small button</Button>
<Button>Medium button</Button>
<Button size="large">Large button</Button>

Deaktivierte Schaltflächen

<Button type="primary" disabled>
  Hello!
</Button>
<Button disabled>Secondary</Button>
<Button type="destructive" disabled>
  Destructive
</Button>

Symbole in Schaltflächen

Verwenden Sie ein Symbol innerhalb von Schaltflächen:

<Button type="primary">
  <Icon name="addCircle" />
  Add customer
</Button>

Schaltflächen in voller Breite

Erstellen Sie eine Button-Komponente in voller Breite mit der css-Eigenschaft:

<Button type="primary" css={{width: 'fill', alignX: 'center'}}>
  Full-width button
</Button>

Links in neuen Registerkarten öffnen

<Button href="https://stripe.com" target="_blank">
  Open link in new tab
</Button>