> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/components/pagination.md). # Pagination {% hint style="info" icon="figma" %} Nom du composant : **pagination** {% endhint %} *** {% embed url="" %} *** ### Principes #### Repère de position L'état actif doit être immédiatement identifiable pour indiquer à l'utilisateur sa progression au sein de l'élément sans aucune ambiguïté. #### Navigation linéaire Les boutons "Précédent" et "Suivant" sont les déclencheurs principaux. Leur design incluant une flèche directionnelle renforce l'aspect séquentiel de la navigation entre les pages de produits. #### Économie d'affichage L'utilisation de points de suspension (...) est nécessaire pour condenser l'interface lorsque le nombre de pages est important. Cela permet de maintenir un encombrement visuel constant et propre. #### Zone de clic optimale Chaque numéro de page et bouton de direction doit bénéficier d'une zone d'interaction suffisamment large pour garantir une navigation confortable, évitant ainsi les erreurs de clic lors d'une consultation rapide. *** ### Usage La pagination est utilisée dès qu'un ensemble de résultats est trop volumineux pour être affiché sur une seule page. Elle divise le contenu en pages numérotées et permet à l'utilisateur de naviguer entre elles de manière explicite et contrôlée. *** ### Composant lié {% content-ref url="/pages/X5jVI1da8wv0fY4tcExg" %} [Bouton](/documentation/components/button.md) {% endcontent-ref %} {% content-ref url="/pages/WvweanFpPFoOMErNIOsq" %} [Fil d'ariane](/documentation/components/breadcrumb.md) {% endcontent-ref %}