Composant de bouton pour les applications Stripe

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>

Propriétés des boutons

CSS

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 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>

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>