ComponentsPagination
Hello Yumma UI! 🎉

Pagination

Provides navigation through a series of pages or sections.

Basic Pagination

<nav class="d-f ai-c g-1">
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 h:bg-silver-1">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
   </a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 bg-slate-8 tc-white">1</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 h:bg-silver-1">2</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 h:bg-silver-1">3</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 h:bg-silver-1">4</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 h:bg-silver-1">5</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 h:bg-silver-1">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
   </a>
</nav>

Outline

<nav class="d-f ai-c g-1">
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 b-1 bc-silver-4 h:bg-silver-1">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
   </a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 bg-slate-8 tc-white b-1 bc-slate-8">1</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 b-1 bc-silver-4 h:bg-silver-1">2</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 b-1 bc-silver-4 h:bg-silver-1">3</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 b-1 bc-silver-4 h:bg-silver-1">4</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 b-1 bc-silver-4 h:bg-silver-1">5</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 b-1 bc-silver-4 h:bg-silver-1">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
   </a>
</nav>

Ellipsis

<nav class="d-f ai-c g-1">
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 h:bg-silver-1">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
   </a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 bg-slate-8 tc-white">1</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 h:bg-silver-1">2</a>
   <span class="d-f ai-c jc-c d-9 fs-sm tc-silver-10">...</span>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 h:bg-silver-1">9</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 h:bg-silver-1">10</a>
   <a href="#" class="d-f ai-c jc-c d-9 rad-9 fs-sm fw-500 tc-slate-8 h:bg-silver-1">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
   </a>
</nav>