Bouton
Pour ajouter le composant Button
à votre application :
import {Button} from '@stripe/ui-extension-sdk/ui';
Plusieurs types de boutons sont disponibles :
<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
Les boutons prennent en charge les propriétés CSS suivantes :
Propriété | Type | Exemple |
alignX | ‘start’ | ‘center’ | ‘end’ | ‘stretch’ | ‘center’ |
Alignement horizontal. Pour en savoir plus, consultez la section Propriétés de mise en page. | ||
largeur | 2/3 | |
Largeur du bouton. Pour en savoir plus, consultez la section Dimensionnement. |
Les boutons ne prennent pas en charge les autres propriétés CSS. Utilisez plutôt les propriétés size
et type
.
Boutons primaires
Les boutons primaires permettent d’initier l’action principale d’une page ou d’un flux donné. Évitez de proposer à l’utilisateur plus d’un bouton primaire à la fois.
<Button type="primary" onPress={() => console.log('Button was pressed')}> Primary button </Button>
Boutons secondaires
Les boutons secondaires sont les boutons par défaut et les plus courants dans les interfaces de produits. Appliquez le style secondaire à tous les boutons qui ne servent pas à effectuer des actions primaires.
<Button onPress={() => console.log('Button was pressed')}> Secondary button </Button>
Boutons de suppression
Utilisez les boutons de suppression exclusivement pour effectuer des actions qui entraînent la suppression d’un objet ou de données.
<Button type="destructive" onPress={() => console.log('Button was pressed')}> Destructive button </Button>
Tailles des boutons
Les boutons sont disponibles en trois tailles, lesquelles déterminent la hauteur de l’élément. Les boutons peuvent être aussi larges que nécessaire pour remplir leur conteneur.
- Utilisez les boutons de petite taille lorsque vous disposez d’un espace restreint ou que vous souhaitez les adapter à du texte en petits caractères (par exemple, des conditions générales).
- La taille moyenne est la taille par défaut des boutons.
- Utilisez les boutons larges lorsque vous souhaitez mettre en évidence un appel à l’action.
<Button size="small">Small button</Button> <Button>Medium button</Button> <Button size="large">Large button</Button>
Boutons désactivés
<Button type="primary" disabled>Hello!</Button> <Button disabled>Secondary</Button> <Button type="destructive" disabled>Destructive</Button>
Icônes dans les boutons
Utilisez une icône dans un bouton :
<Button type="primary"> <Icon name="addCircle" /> Add customer </Button>
Instructions relatives au contenu
Utiliser la formule {verb} + {noun} pour les étiquettes
Par exemple, Mettre à jour un client. Il est possible de rompre ce schéma dans le cas d’actions courantes telles que Terminé, Fermer, Annuler, Ajouter ou Supprimer.
Fournir le plus de détails possible
Pour les boutons qui exécutent une action ou qui renvoient l’utilisateur vers une autre page, mentionnez cette action ou cette page dans l’étiquette.
Utiliser la casse de la phrase
Cette règle s’applique dans la plupart des cas, à l’exception des noms propres et des phrases.
Éviter la ponctuation
Évitez les points, les points d’exclamation et les points d’interrogation.
Employer la deuxième personne
Lorsque vous vous adressez à l’utilisateur dans un bouton ou dans un lien, utilisez systématiquement les pronoms personnels de la deuxième personne. Par exemple : Publiez votre état.
Boutons larges
Créez un composant Button
large à l’aide de la propriété css
:
<Button type="primary" css={{width: 'fill', alignX: 'center'}}> Full-width button </Button>
Ouverture de liens dans de nouveaux onglets
<Button href="https://stripe.com" target="_blank"> Open link in new tab </Button>