Composant Link pour les applications Stripe

Les liens permettent de rediriger les utilisateurs d'une page à une autre, ainsi que pour les actions plus complexes pour lesquelles l'utilisation d'un bouton n'est pas envisageable.

Version du SDK

Pour ajouter le composant Link à votre application :

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

Les produits Stripe proposent deux types de liens : les liens primaires et les liens secondaires.

Chargement de l'exemple...

<Link href="https://www.stripe.com">Primary link</Link>
<Link type="secondary" href="https://www.stripe.com">
  Secondary link
</Link>

Propriétés des liens

Propriété	Type
`children`	Obligatoire `React.ReactNode` Le contenu du composant.
`css`	Facultatif `CSS \| undefined` Types associés : CSS.
`disabled`	Facultatif `boolean \| undefined` Indique si l’action est désactivée.
`external`	Facultatif `boolean \| undefined` Indique s’il s’agit d’un lien vers une ressource externe.
`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.
`rel`	Facultatif `string \| undefined` Attribut `rel` natif.
`tabIndex`	Facultatif `number \| undefined` Remplace le comportement par défaut de la touche de tabulation. Évitez d’utiliser des valeurs autres que `-1` et `0`.
`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") \| undefined` Le type du `Link`.
`className`	FacultatifObsolète `string \| undefined`

CSS

Propriété Type

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

alignX

Facultatif

("start" | "center" | "end" | "stretch") | undefined

Alignement horizontal. Pour en savoir plus, consultez les propriétés de mise en page.

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.

Lien primaire

Le style primaire est le style par défaut pour les liens. Utilisez-le lorsque vous créez des liens menant vers des ressources externes ou vers d’autres pages de l’application.

Chargement de l'exemple...

<Link href="https://www.stripe.com">Primary link</Link>
<Link external href="https://www.example.com">
  External primary link
</Link>

Lien secondaire

Utilisez les liens secondaires dans les cas suivants :

Lorsqu’un lien risque d’entrer en conflit avec un autre bouton ou lien primaire situé à proximité
Lorsqu’un grand nombre d’éléments sont présentés à l’écran et que chacun d’entre eux comporte un lien, nous vous conseillons d’utiliser des liens secondaires afin d’éviter toute surcharge visuelle.
Lorsque vous créez un lien vers un objet (Customer, Payment, Product, etc.), dès lors que l’interface utilisateur fait référence à ces objets, créez un lien permettant d’y accéder. Utilisez le style secondaire pour réduire l’encombrement visuel dû à la présence de nombreux objets sur une même page.

Chargement de l'exemple...

<Link type="secondary" href="https://www.stripe.com">
  Secondary link
</Link>

Liens désactivés

Chargement de l'exemple...

<Link disabled href="https://www.stripe.com">
  Primary link
</Link>
<Link disabled type="secondary" href="https://www.stripe.com">
  Secondary link
</Link>

Ouverture de liens dans de nouveaux onglets

Chargement de l'exemple...

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

Valeurs href autorisées

L’attribut href prend en charge les URL relatives et http ou https. Les autres valeurs sont filtrées au moment de l’exécution.

Composant Link pour les applications Stripe

Les liens permettent de rediriger les utilisateurs d'une page à une autre, ainsi que pour les actions plus complexes pour lesquelles l'utilisation d'un bouton n'est pas envisageable.

Propriétés des liens

CSS

Lien primaire

Lien secondaire

Liens désactivés

Ouverture de liens dans de nouveaux onglets

Valeurs href autorisées

Voir aussi