# Composant de bouton pour les applications Stripe Utilisez des boutons pour permettre aux utilisateurs d'effectuer des actions, pour attirer l'attention d'un utilisateur ou pour l'avertir des résultats. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/button?app-sdk-version=8. Pour ajouter le composant `Button` à votre application : ```js import {Button} from '@stripe/ui-extension-sdk/ui'; ``` Plusieurs types de boutons sont disponibles : ### Propriétés des boutons | Propriété | Type | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Le contenu du composant. | | `css` | (Facultatif) `CSS | undefined` Types associés : [CSS](https://docs.stripe.com/stripe-apps/components/button.md#css). | | `disabled` | (Facultatif) `boolean | undefined` Indique si l’action est désactivée. | | `href` | (Facultatif) `string | undefined` Attribut `href` natif. | | `onPress` | (Facultatif) `((event: PressEvent) => void) | undefined` Le gestionnaire appelé lorsque l’appui sur le bouton est relâché au-dessus de la cible. | | `size` | (Facultatif) `("small" | "medium" | "large") | undefined` La taille du composant. | | `target` | (Facultatif) `("_self" | "_blank" | "_top" | "_parent") | undefined` Emplacement d’affichage de l’URL associée, en tant que nom d’un contexte de navigation. | | `type` | (Facultatif) `("primary" | "secondary" | "destructive") | undefined` Le type du `Button`. | | `className` | (Facultatif)(Obsolète) `string | undefined` | ### CSS | Propriété | Type | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `alignX` | (Facultatif) `("start" | "center" | "end" | "stretch") | undefined` Alignement horizontal. Pour en savoir plus, consultez les [propriétés de mise en page](https://docs.stripe.com/stripe-apps/style.md#layout-properties). | | `width` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Largeur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | ## 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. ## 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. ## 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. ## 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. ## Boutons désactivés ## Icônes dans les boutons Utilisez une [icône](https://docs.stripe.com/stripe-apps/components/icon.md) dans un bouton : ## Boutons larges Créez un composant `Button` large à l’aide de la propriété `css` : ## Ouverture de liens dans de nouveaux onglets # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/button?app-sdk-version=9. Pour ajouter le composant `Button` à votre application : ```js import {Button} from '@stripe/ui-extension-sdk/ui'; ``` Plusieurs types de boutons sont disponibles : ### Propriétés des boutons | Propriété | Type | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Le contenu du composant. | | `css` | (Facultatif) `CSS | undefined` Types associés : [CSS](https://docs.stripe.com/stripe-apps/components/button.md#css). | | `disabled` | (Facultatif) `boolean | undefined` Indique si l’action est désactivée. | | `href` | (Facultatif) `((string | RouteDescriptor) | undefined) | undefined` Un attribut `href` natif ou une route du Dashboard permettant la navigation. Types associés : [RouteDescriptor](https://docs.stripe.com/stripe-apps/components/button.md#routedescriptor). | | `onPress` | (Facultatif) `((event: PressEvent) => void) | undefined` Le gestionnaire appelé lorsque l’appui sur le bouton est relâché au-dessus de la cible. | | `pending` | (Facultatif) `boolean | undefined` Définit le style visuel comme étant en attente et désactive complètement le `Button`. | | `size` | (Facultatif) `("small" | "medium" | "large") | undefined` La taille du composant. | | `target` | (Facultatif) `("_self" | "_blank" | "_top" | "_parent") | undefined` Emplacement d’affichage de l’URL associée, en tant que nom d’un contexte de navigation. | | `type` | (Facultatif) `("primary" | "secondary" | "destructive") | undefined` Le type du `Button`. | ### CSS | Propriété | Type | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `alignX` | (Facultatif) `("start" | "center" | "end" | "stretch") | undefined` Alignement horizontal. Pour en savoir plus, consultez les [propriétés de mise en page](https://docs.stripe.com/stripe-apps/style.md#layout-properties). | | `width` | (Facultatif) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Largeur du composant. Pour en savoir plus, consultez la section [Dimensions](https://docs.stripe.com/stripe-apps/style.md#sizing). | ### RouteDescriptor Il s’agit d’un type union. Il peut prendre l’une des valeurs suivantes : [BalanceOverviewRoute](https://docs.stripe.com/stripe-apps/components/button.md#balanceoverviewroute), [BillingRoute](https://docs.stripe.com/stripe-apps/components/button.md#billingroute), [CustomersRoute](https://docs.stripe.com/stripe-apps/components/button.md#customersroute), [CustomerDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#customerdetailsroute), [DashboardRoute](https://docs.stripe.com/stripe-apps/components/button.md#dashboardroute), [FullPageRoute](https://docs.stripe.com/stripe-apps/components/button.md#fullpageroute), [InvoiceDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#invoicedetailsroute), [InvoicesRoute](https://docs.stripe.com/stripe-apps/components/button.md#invoicesroute), [OnboardingRoute](https://docs.stripe.com/stripe-apps/components/button.md#onboardingroute), [PaymentDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#paymentdetailsroute), [PaymentReviewDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#paymentreviewdetailsroute), [PaymentsRoute](https://docs.stripe.com/stripe-apps/components/button.md#paymentsroute), [ProductDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#productdetailsroute), [ProductsRoute](https://docs.stripe.com/stripe-apps/components/button.md#productsroute), [ReportsHubRoute](https://docs.stripe.com/stripe-apps/components/button.md#reportshubroute), [RevenueRecognitionRoute](https://docs.stripe.com/stripe-apps/components/button.md#revenuerecognitionroute), [ShippingRateDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#shippingratedetailsroute), [ShippingRatesRoute](https://docs.stripe.com/stripe-apps/components/button.md#shippingratesroute), [SubscriptionDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#subscriptiondetailsroute), [SubscriptionsRoute](https://docs.stripe.com/stripe-apps/components/button.md#subscriptionsroute), [TaxReportingLocationsRoute](https://docs.stripe.com/stripe-apps/components/button.md#taxreportinglocationsroute), [TaxReportingRoute](https://docs.stripe.com/stripe-apps/components/button.md#taxreportingroute). ### BalanceOverviewRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"balanceOverview"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### BillingRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"billing"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### CustomersRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"customers"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### CustomerDetailsRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Obligatoire) `"customerDetails"` | | `params` | (Obligatoire) `Params` Types associés : [Params](https://docs.stripe.com/stripe-apps/components/button.md#customerdetailsroute-params). | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### CustomerDetailsRoute Params | Propriété | Type | | ------------ | -------------------------------------------------- | | `customerId` | (Obligatoire) `string` Identifiant du client. | ### DashboardRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"dashboard"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### FullPageRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"fullPage"` | | `params` | (Obligatoire) `Params` Types associés : [Params](https://docs.stripe.com/stripe-apps/components/button.md#fullpageroute-params). | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### FullPageRoute Params | Propriété | Type | | --------- | ---------------------------------------------------------------------------------- | | `appId` | (Obligatoire) `string` L’ID de l’application | | `tabId` | (Facultatif) `string | undefined` L’ID de l’onglet qui doit être sélectionné. | ### InvoiceDetailsRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"invoiceDetails"` | | `params` | (Obligatoire) `Params` Types associés : [Params](https://docs.stripe.com/stripe-apps/components/button.md#invoicedetailsroute-params). | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### InvoiceDetailsRoute Params | Propriété | Type | | ----------- | ----------------------------------------------- | | `invoiceId` | (Obligatoire) `string` L’ID de la facture. | ### InvoicesRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"invoices"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### OnboardingRoute | Propriété | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Obligatoire) `"onboarding"` | | `params` | (Obligatoire) `Params` Types associés : [Params](https://docs.stripe.com/stripe-apps/components/button.md#onboardingroute-params). | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### OnboardingRoute Params | Propriété | Type | | --------- | ------------------------------------------------- | | `appId` | (Obligatoire) `string` L’ID de l’application | ### PaymentDetailsRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"paymentDetails"` | | `params` | (Obligatoire) `Params` Types associés : [Params](https://docs.stripe.com/stripe-apps/components/button.md#paymentdetailsroute-params). | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### PaymentDetailsRoute Params | Propriété | Type | | ----------- | ---------------------------------------------------- | | `paymentId` | (Obligatoire) `string` Identifiant du paiement. | ### PaymentReviewDetailsRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"paymentReviewDetails"` | | `params` | (Obligatoire) `Params` Types associés : [Params](https://docs.stripe.com/stripe-apps/components/button.md#paymentreviewdetailsroute-params). | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### PaymentReviewDetailsRoute Params | Propriété | Type | | ----------- | ---------------------------------------------------- | | `paymentId` | (Obligatoire) `string` Identifiant du paiement. | ### PaymentsRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"payments"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### ProductDetailsRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"productDetails"` | | `params` | (Obligatoire) `Params` Types associés : [Params](https://docs.stripe.com/stripe-apps/components/button.md#productdetailsroute-params). | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### ProductDetailsRoute Params | Propriété | Type | | ----------- | --------------------------------------------------- | | `productId` | (Obligatoire) `string` Identifiant du produit. | ### ProductsRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"products"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### ReportsHubRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"reportsHub"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### RevenueRecognitionRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"revenueRecognition"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### ShippingRateDetailsRoute | Propriété | Type | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Obligatoire) `"shippingRateDetails"` | | `params` | (Obligatoire) `Params` Types associés : [Params](https://docs.stripe.com/stripe-apps/components/button.md#shippingratedetailsroute-params). | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### ShippingRateDetailsRoute Params | Propriété | Type | | ---------------- | -------------------------------------------------------------- | | `shippingRateId` | (Obligatoire) `string` Identifiant du tarif d’expédition. | ### ShippingRatesRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"shippingRates"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### SubscriptionDetailsRoute | Propriété | Type | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Obligatoire) `"subscriptionDetails"` | | `params` | (Obligatoire) `Params` Types associés : [Params](https://docs.stripe.com/stripe-apps/components/button.md#subscriptiondetailsroute-params). | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### SubscriptionDetailsRoute Params | Propriété | Type | | ---------------- | -------------------------------------------------------- | | `subscriptionId` | (Obligatoire) `string` Identifiant de l’abonnement. | ### SubscriptionsRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"subscriptions"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### TaxReportingLocationsRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"taxReportingLocations"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ### TaxReportingRoute | Propriété | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"taxReporting"` | | `envParams` | (Facultatif) `{ [x: string]: string; } | undefined` Paramètres de requête transmis aux vues Extension via la propriété `environment`. | ## 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. ## 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. ## 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. ## 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. ## Boutons désactivés ## Icônes dans les boutons Utilisez une [icône](https://docs.stripe.com/stripe-apps/components/icon.md) dans un bouton : ## Boutons larges Créez un composant `Button` large à l’aide de la propriété `css` : ## Ouverture de liens dans de nouveaux onglets ## Boutons en attente ## See also - [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md) - [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md) - [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)