Schaltfläche
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>
Props
Prop | Type | Description |
---|---|---|
className |
| |
disabled |
| Whether the action is disabled. |
href |
| Native `href` attribute |
onPress |
| Handler that is called when the press is released over the target. |
size |
| The size of the button |
target |
| |
type |
| The type of the button |
CSS
Schaltflächen unterstützen diese CSS-Eigenschaften:
Eigenschaft | Typ | Beispiel |
alignX | ‘start’ | ‘center’ | ‘end’ | ‘stretch’ | ‘center’ |
Horizontale Ausrichtung. Siehe Layout-Eigenschaften für weitere Informationen. | ||
Breite | 2/3 | |
Breite der Schaltfläche. Siehe Größenanpassung für weitere Informationen. |
Schaltflächen unterstützen kein anderes CSS. Verwenden Sie stattdessen die Eigenschaften size
und type
.
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>
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.
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>