Notifications

3 new

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

Emma Wilson commented on Homepage Redesign

45 minutes ago

James Miller mentioned you in Sprint Planning

2 hours ago

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Pagination

Pagination component examples.

Basic Pagination

...

<div class="flex items-center justify-between">
  <button class="text-sm text-gray-500 hover:text-gray-700 font-medium">Previous</button>
  <div class="flex items-center gap-1">
    <button class="w-8 h-8 rounded-lg bg-alpine-500 text-white text-sm font-medium">1</button>
    <button class="w-8 h-8 rounded-lg hover:bg-gray-100 text-sm">2</button>
    <button class="w-8 h-8 rounded-lg hover:bg-gray-100 text-sm">3</button>
    <span class="px-1 text-gray-400">...</span>
    <button class="w-8 h-8 rounded-lg hover:bg-gray-100 text-sm">28</button>
  </div>
  <button class="text-sm text-gray-500 hover:text-gray-700 font-medium">Next</button>
</div>

Simple Pagination

Page 1 of 10

<div class="flex items-center justify-between">
  <button class="px-4 py-2 rounded-lg border border-gray-200 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">Previous</button>
  <span class="text-sm text-gray-500 font-medium">Page 1 of 10</span>
  <button class="px-4 py-2 rounded-lg border border-gray-200 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">Next</button>
</div>

Pagination with Icons

<div class="flex items-center justify-center gap-2">
  <button class="w-9 h-9 rounded-lg border border-gray-200 flex items-center justify-center hover:bg-gray-50 transition-colors">
    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
  </button>
  <button class="w-9 h-9 rounded-lg bg-alpine-500 text-white text-sm font-medium">1</button>
  <button class="w-9 h-9 rounded-lg hover:bg-gray-100 text-sm">2</button>
  <button class="w-9 h-9 rounded-lg hover:bg-gray-100 text-sm">3</button>
  <button class="w-9 h-9 rounded-lg border border-gray-200 flex items-center justify-center hover:bg-gray-50 transition-colors">
    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
  </button>
</div>

Small Pagination

<div class="flex items-center justify-center gap-1">
  <button class="w-7 h-7 rounded text-xs border border-gray-200 flex items-center justify-center hover:bg-gray-50 transition-colors">
    <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
  </button>
  <button class="w-7 h-7 rounded bg-alpine-500 text-white text-xs font-medium">1</button>
  <button class="w-7 h-7 rounded text-xs hover:bg-gray-100">2</button>
  <button class="w-7 h-7 rounded text-xs hover:bg-gray-100">3</button>
  <button class="w-7 h-7 rounded text-xs text-gray-400">...</button>
  <button class="w-7 h-7 rounded text-xs hover:bg-gray-100">12</button>
  <button class="w-7 h-7 rounded text-xs border border-gray-200 flex items-center justify-center hover:bg-gray-50 transition-colors">
    <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
  </button>
</div>