# Trilogy Design System - Composants ## Composants disponibles (46) #### [Accordion](/api/components/Accordion?format=markdown) L’accordéon permet d'afficher de grandes quantités de contenu dans un espace réduit grâce à la divulgation progressive. #### [Alert](/api/components/Alert?format=markdown) Les alertes sont utilisées pour afficher des informations concernant un impact sur l'expérience utilisateur et les utilisations du produit. #### [Badge](/api/components/Badge?format=markdown) Les badges sont des étiquettes permettant de communiquer efficacement une information simple et contextuelle (le plus souvent, un compte numérique) sur le composant auquel le badge est rattaché. #### [Box](/api/components/Box?format=markdown) Une box est un conteneur qui permet de regrouper et structurer du contenu dans une page. #### [Breadcrumb](/api/components/Breadcrumb?format=markdown) Le breadcrumb ou fil d’ariane est un élément de navigation utilisé pour indiquer l'emplacement actuel de l'utilisateur et l'aider à naviguer. #### [Button](/api/components/Button?format=markdown) Le bouton est un composant cliquable qui permet à l’utilisateur de déclencher une action spécifique au sein de l’interface. #### [Calendar](/api/components/Calendar?format=markdown) Le composant Calendar permet de sélectionner et visualiser des dates ou des plages de dates dans une interface claire et intuitive. Il s’adapte aux différents formats et langues, tout en respectant les règles d’accessibilité. #### [Card](/api/components/Card?format=markdown) Une card contient du contenu (image et texte) et des actions sur un seul sujet. #### [Chips](/api/components/Chips?format=markdown) Les chips sont des éléments compacts qui représentent une entrée, un attribut ou une action. #### [Columns](/api/components/Columns?format=markdown) Le composant Columns permet de diviser l'espace horizontal en plusieurs sections verticales, afin de créer une structure harmonieuse et responsive. #### [Container](/api/components/Container?format=markdown) Le conteneur centre votre contenu horizontalement. C'est l'élément de mise en page le plus basique. #### [Countdown](/api/components/Countdown?format=markdown) Le compte à rebours est utile pour visualiser la fin d’un évènement. #### [Divider](/api/components/Divider?format=markdown) Les séparateurs sont utilisés pour différencier des zones d'information au sein d'un espace de contenu neutre comme les cartes, les box ou les sections. #### [Fab](/api/components/Fab?format=markdown) Le FAB (Floating Action Button) représente l'action la plus importante sur un écran. Il met les actions clés à portée de main. #### [FlexBox](/api/components/FlexBox?format=markdown) Le composant FlexBox est un élément de structure conçu pour faciliter l'alignement et la disposition des éléments enfants de manière répétitive. Il offre une structure efficace pour gérer l'orientation et l'espacement entre les éléments. #### [Hero](/api/components/Hero?format=markdown) Bannière de haut de page destiné à attirer l'attention. #### [Icon](/api/components/Icon?format=markdown) Chaque icône est conçue pour communiquer une intention et faciliter la navigation. Pour voir la liste complète, c'est par [ici](/foundations/icons). #### [Input](/api/components/Input?format=markdown) Le composant Input permet de récolter des informations saisies librement par l'utilisateur. #### [Link](/api/components/Link?format=markdown) Le lien est un composant cliquable qui permet à l’utilisateur de naviguer vers une nouvelle page ou une autre section de l'interface. #### [List](/api/components/List?format=markdown) Les listes sont des outils de mise en page, allant des listes simples aux listes de descriptions incluant des icones en entête. #### [Modal](/api/components/Modal?format=markdown) Une modale met en avant un contenu nécessitant une interaction de l'utilisateur avant qu'il ne puisse continuer son parcours. Elle apparait au clic sur un élément déclencheur (généralement un lien ou un bouton) #### [Otp](/api/components/Otp?format=markdown) OTP (One Time Password) est un code numérique à usage unique pour s’identifier ou confirmer une action. #### [Pagination](/api/components/Pagination?format=markdown) Le composant pagination permet à l'utilisateur de naviguer efficacement losque les résultats visualisés sont nombreux et séparés en plusieurs pages. #### [Popover](/api/components/Popover?format=markdown) Le popover est un complément d’information qui s’affiche au survol d’un élément. #### [Price](/api/components/Price?format=markdown) Le composant Price est utile pour l’affichage stylisé et normé des prix. #### [Progress](/api/components/Progress?format=markdown) Une barre de progression affiche la durée d'un processus. #### [Radio](/api/components/Radio?format=markdown) Un bouton radio permet aux utilisateurs de ne sélectionner qu'une seule valeur dans une liste de deux options ou plus. #### [Range](/api/components/Range?format=markdown) Le composant range permet aux utilisateurs d'effectuer des sélections à partir d'une plage de valeurs. #### [Rows](/api/components/Rows?format=markdown) Gerér l'alignement horizontal entre les éléments de deux colonnes #### [Section](/api/components/Section?format=markdown) Le composant Section est une unité de structure de base utilisée pour diviser les pages en segments logiques. Il encapsule le contenu et permet de structurer la mise en page de manière cohérente et modulable. #### [Select](/api/components/Select?format=markdown) Le sélecteur donne aux utilisateurs la possibilité d'effectuer une sélection unique ou des sélections multiples parmi un certain nombre d'options. #### [Stepper](/api/components/Stepper?format=markdown) Un stepper affiche la progression d’un parcours en le décomposant en plusieurs étapes logiques et numérotées. #### [Sticker](/api/components/Sticker?format=markdown) Le sticker est utilisé pour faire émerger une information. #### [Switch](/api/components/Switch?format=markdown) Un switch permet aux utilisateurs de choisir deux états mutuellement exclusifs comme ON/OFF. #### [Table](/api/components/Table?format=markdown) Les tableaux permettent d'afficher des données tabulaires. Ils sont classiques par défaut et peuvent être déclinés pour comparer des éléments (forfaits, téléphones, etc.) #### [Tabs](/api/components/Tabs?format=markdown) Les onglets facilitent l'exploration et le basculement entre les différentes vues. #### [Tag](/api/components/Tag?format=markdown) Les tags sont des éléments visuels informatifs statiques utilisés individuellement ou en groupe pour catégoriser, étiqueter ou indiquer l'état d'un élément. #### [Text](/api/components/Text?format=markdown) Le texte affiche des informations écrites, essentielles pour la communication et la structuration du contenu. #### [Timeline](/api/components/Timeline?format=markdown) Il permet d’illustrer de manière graphique et linéaire différentes étapes. #### [Timepicker](/api/components/Timepicker?format=markdown) Composant de sélection d'heure permettant à l'utilisateur de saisir une heure précise, disponible en mode champ de saisie ou en mode circulaire. #### [Title](/api/components/Title?format=markdown) Les titres nous permettent de structurer les sections de notre contenu et nous avons utilisé différentes tailles pour créer une hiérarchie dans ces sections. #### [AutoComplete](/api/components/AutoComplete?format=markdown) L'Autocomplete est un champ de saisie qui propose des suggestions dynamiques à mesure que l'utilisateur tape, pour accélérer et fiabiliser la saisie. #### [Checkbox](/api/components/Checkbox?format=markdown) La checkbox permet aux utilisateurs de sélectionner un ou plusieurs éléments dans un ensemble. #### [Datepicker](/api/components/Datepicker?format=markdown) Champ de saisie de date avec calendrier intégré, permettant à l'utilisateur de saisir ou sélectionner une date au format JJ/MM/AAAA. #### [Segmented-Control](/api/components/Segmented-Control?format=markdown) Un segmented control est un ensemble linéaire de deux segments ou plus, chacun fonctionnant comme un bouton. #### [Textarea](/api/components/Textarea?format=markdown) Le composant Textarea permet de récolter des informations saisies librement par l'utilisateur. Il doit être contenu dans une balise