Composants

Les composants sont des blocs de constructions - conçus et programmés - prêts à l’emploi et réutilisables. Pouvant s’assembler de différentes manières, ils s'adaptent au contexte qu'on leur donne. Modulables et flexibles, ils peuvent être injectés avec tout type de contenu, créant des interfaces façonnées en fonction des besoins de chacun.

Les composants sont répartis dans plusieurs grandes catégories en fonction de leur objectif. Voici les différentes catégories :

Action

  • Button

    Éléments cliquables qui sont utilisés pour déclencher des actions.

  • Button Action

    Éléments cliquables qui sont utilisés pour déclencher des actions.

  • Dropdown

    Menu déroulant affichant une liste d’options.

  • Link

    Éléments cliquables utilisés comme éléments de navigation ou d’action secondaire.

  • Sheet

    Affiche des actions liées à un élément.

  • Tile

    Ensemble de liens et d'actions groupés en catégorie.

Conteneur

  • Accordion

    Liste empilée de headers qui affiche ou masque des contenus associés.

  • Cards

    Conteneurs visuels regroupant du contenu ou des actions liées.

  • Cart

    Récapitulatif des articles sélectionnés pour un achat.

  • Collapse

    Cache des informations longues ou complexes sous un bloc.

  • Stepper

    Affiche les différentes étapes d'un processus.

  • Table

    Structure pour organiser des données en lignes et colonnes.

Entrée de data

  • Checkbox

    Case à cocher pour sélectionner une ou plusieurs options.

  • Date picker

    Permet de sélectionner une date ou une plage de dates.

  • Dropzone

    Zone dédiée au dépôt de fichiers pour les uploader.

  • Input

    Champ de formulaire destiné à la saisie de données.

  • Radio

    Permet de sélectionner une option dans une liste d'options mutuellement exclusives.

  • Range slider

    Curseur permettant de choisir une valeur dans un intervalle défini.

  • Search

    Champ destiné à la recherche de contenu.

  • Select
    Menu déroulant pour choisir une ou plusieurs options dans une liste.

  • Switch

    Contrôle pour activer ou désactiver une option.

Feedback et overlays

  • Alert

    Message important attirant l’attention sur une situation à traiter.

  • Chatbot

    Interface de conversation avec un assistant.

  • Popover

    Conteneur contextuel affiché au clic ou au focus, attaché à un élément déclencheur.

  • Modal

    Boîte de dialogue qui apparaît au-dessus du contenu principal.

  • Sheet

    Affiche des détails liés à un élément.

  • Toast notification

    Message bref et temporaire affiché en superposition.

  • Tooltip

    Information contextuelle affichée au survol ou au focus d’un élément.

Indicateurs et identifiants

  • Avatar

    Représentation visuelle d'un utilisateur (image ou initiales).

  • Badge

    Petits labels qui aident à qualifier ou mettre en avant des informations.

  • Countdown

    Affichage du temps restant jusqu’à un événement.

  • Gauge

    Indicateur représentant une valeur sur une échelle.

  • Plan pill

    Illustre les différents forfaits et offres.

  • Player

    Composant de lecture pour contenus vidéo ou audio.

  • Prices

    Affiche la valeur monétaire d'un produit ou d'un service.

  • Skeleton loader

    Indique que les données sont en cours de chargement.

  • Status

    Indication visuelle d'un état ou d'une condition.

  • Timeline

    Représentation chronologique d’événements.

Natif

  • Dialog

    Fenêtre flottante demandant une action ou affichant une information importante.

  • Home indicator

    Élément fixé en bas de l'écran permettant de naviguer sur le device.

  • Keyboard

    Clavier virtuel utilisé pour la saisie de texte.

  • Status bar

    Zone d’affichage des informations système ou d’état.