# Pagination / Paginación > Links to result pages with previous and next. Page: https://componentes-lovat.vercel.app/c/pagination/ License: MIT · Design: coss ui (MIT) · pagination.tsx Requires: tokens.css, button Context: ambos · Density: media · Tone: sobria ## Files - Tokens (once): https://componentes-lovat.vercel.app/tokens.css - Dependency `button`: https://componentes-lovat.vercel.app/r/button.json - HTML: https://componentes-lovat.vercel.app/raw/pagination/pagination.html - CSS: https://componentes-lovat.vercel.app/raw/pagination/pagination.css - Everything in one file: https://componentes-lovat.vercel.app/r/pagination.html Dark theme: add class `dark` to ``. ## When to use - When a list is split into pages. ## When not to use - With few items: show them all. ## Accessibility Roles: navigation, link | Keys | Action | |---|---| | Tab | Moves through the pages | - The current page has aria-current=page. - On mobile, previous and next become icons with aria-label. ## Code ```html ``` ```css /* pagination · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI). Generado por tools/build_css.py desde pagination.tw.json. No editar a mano. Necesita tokens.css. */ .c-pagination{margin-inline:auto;display:flex} .c-pagination__content{display:flex} .c-pagination__ellipsis{display:flex} .c-pagination{width:100%} .c-pagination__ellipsis{min-width:calc(var(--spacing)*7)} .c-pagination__content{flex-direction:row;align-items:center} .c-pagination{justify-content:center} .c-pagination__ellipsis{justify-content:center} .c-pagination__content{gap:calc(var(--spacing)*1)} @media not all and (min-width:40rem){ .c-pagination__label{display:none} .c-pagination__prev{aspect-ratio:1} .c-pagination__next{aspect-ratio:1} .c-pagination__prev{padding:calc(var(--spacing)*0)} .c-pagination__next{padding:calc(var(--spacing)*0)} } @media (min-width:40rem){ .c-pagination__prev{margin-inline-start:calc(var(--spacing)*-1)} .c-pagination__next{margin-inline-end:calc(var(--spacing)*-1)} } /* propio */ .c-pagination__content{list-style:none;margin:0;padding:0} .c-pagination__ellipsis svg{width:1rem;height:1rem;color:var(--muted-foreground)} .c-pagination .c-btn[aria-current=page]{pointer-events:none} .c-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} ``` ## Credits - coss ui (MIT) · pagination.tsx: https://coss.com/ui