Composants d'interface utilisateur

Utilisez la bibliothèque de composants de Stripe pour créer rapidement votre interface utilisateur.

Si votre application a besoin d’un front-end, utilisez cette documentation de référence pour composer une interface utilisateur. La bibliothèque de composants préconfigurés de Stripe possède des propriétés personnalisables vous permettant de créer rapidement des applications conformes aux bonnes pratiques de Stripe. Utilisez les composants pour structurer les mises en page et créer des expériences graphiques ou interactives dans vos applications.

Tous les composants sont disponibles dans Figma à l’adresse @stripedesign sur Figma Community.

Vues

Chaque vue ajoutée requiert un composant de vue. Il détermine quelle vue est utilisée selon les situations, comme pour les pages HTML d’un site web.

La vue ContextView est la plus courante. Lorsqu’un utilisateur commence un flux ou une tâche dans votre application, son affichage doit basculer sur FocusView afin de masquer les détails en arrière-plan. Pour concevoir la page des paramètres de votre application, utilisez SettingsView. Pour concevoir un écran de connexion, utilisez SignInView.

Certaines vues sont des composants racine. ContextView, SettingsView et SignInView sont des vues racines (les composants fondamentaux qui contiennent tous les autres éléments d’interface utilisateur), tandis que FocusView est un composant enfant de ContextView.

Composant	Description
ContextView	La vue ContextView permet d’afficher des applications à côté du contenu de Stripe dans un volet, afin que les utilisateurs puissent les consulter côte à côte et partager la fenêtre contextuelle.
SettingsView	Utilisez une SettingsView afin de permettre aux utilisateurs de modifier des détails concernant le fonctionnement de l’application avec leur compte.
SignInView	Utilisez SignInView pour afficher un écran de connexion à l’intention des utilisateurs.

Disposition

Utilisez les composants de mise en page pour créer la structure de vos pages et de vos éléments.

Composant	Description
Box	Utilisez les composants Box pour envelopper les autres composants et ajouter des styles et mises en page personnalisés.
Divider	Affichez une règle horizontale simple avec le composant séparateur.

Utilisez les composants de navigation pour aider les utilisateurs à se repérer et à interagir avec votre application.

Composant	Description
Button	Les boutons permettent aux utilisateurs de réaliser certaines actions lorsqu’ils utilisent les produits Stripe. Vous pouvez aussi les utiliser pour attirer leur attention ou les avertir d’un résultat.
ButtonGroup	Utilisez Buttongroup pour gérer la mise en page de plusieurs boutons et les réduire en menu de débordement lorsque l’espace est limité.
Link	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.
Menu	Un menu présente un groupe d’actions parmi lesquelles l’utilisateur peut choisir, souvent liées à un objet ou à un contexte particulier.
Tabs	Utilisez des onglets pour afficher les sections de contenu.

Contenu

Utilisez les composants Content pour organiser et placer les informations dans votre application.

Composant	Description
Accordion	Utilisez des accordéons pour diviser du contenu long ou complexe en plusieurs parties réductibles.
Badge	Utilisez les badges pour indiquer les états par lesquels un poste ou un objet pourrait passer ou évoluer.
Banner	Utilisez la bannière pour afficher des alertes ou messages que vous souhaitez rendre explicites pour l’utilisateur.
Chip	Utilisez des puces pour afficher des valeurs aux utilisateurs et leur permettre de les modifier.
FocusView	Utilisez FocusView pour ouvrir un espace dédié permettant à l’utilisateur d’effectuer une tâche spécifique.
Icon	Affichez une image d’icône dans un format compatible.
Img	Affichez des images avec le composant d’interface utilisateur Img.
Inline	Utilisez le composant Inline pour styliser des contenus inline comme du texte.
List	Affichez une liste d’informations dans un large éventail de formats préconfigurés.
Spinner	Utilisez le composant Spinner pour indiquer qu’un élément est en train de charger.
Table	Affichez des lignes et des colonnes de données.
Toast	Informez les utilisateurs d’un état temporaire.
Tooltip	Utilisez des infobulles pour intégrer des précisions à propos d’un élément ou d’un sujet particulier.

Formulaires

Utilisez des composants de formulaire pour créer des champs de saisie et des contrôles nécessitant une saisie de la part de l’utilisateur. Par exemple, vous pouvez les utiliser pour créer des listes de contrôle ou permettre à des utilisateurs de sélectionner des paramètres.

Composant	Description
Checkbox	Utilisez des cases à cocher pour indiquer ou contrôler des valeurs booléennes.
DateField	Utilisez DateField pour créer un champ de saisie de texte.
FormFieldGroup	Regroupez des champs de formulaire avec le composant FormFieldGroup.
Radio	Utilisez les boutons radio pour permettre à l’utilisateur de faire un choix parmi un ensemble d’options mutuellement exclusives.
Select	Utilisez le composant Select pour permettre à l’utilisateur de faire un choix parmi un ensemble d’options dans une liste déroulante.
Switch	Les boutons bascule, comme les cases à cocher, peuvent servir à indiquer ou contrôler des valeurs booléennes.
TextArea	Utilisez TextArea pour créer un champ de saisie pour plusieurs lignes de texte.
TextField	Utilisez TextField pour créer un champ de saisie de texte.

Graphiques

Utilisez des composants graphiques pour représenter visuellement les points de données. Par exemple, utilisez un graphique dans votre application pour aider les utilisateurs à suivre les données des paiements ou à comparer leurs progrès dans le temps.

Composant	Description
BarChart	Un diagramme en barres représente les données sous la forme d’une série de points de données en barres.
LineChart	Un diagramme linéaire représente les données sous la forme d’une série de points de données connectés.
Sparkline	Un type de graphique linéaire qui affiche les données de façon succincte sous forme d’une ligne simple.