Pagination — Sinapse Design System

Simple

Chevron esquerdo + input + chevron direito. Use quando o salto entre extremos não importa.

Página de 10

<Pagination total={10} current={1} />

<template>
<nav class="inline-flex items-center gap-2">
  <button :disabled="current === 1" class="itps-btn itps-btn--ghost itps-btn--icon itps-btn--sm" aria-label="Anterior">
    <span class="material-symbols-outlined">chevron_left</span>
  </button>
  <input type="number" v-model="current" :min="1" :max="total" class="itps-input w-16 text-center" />
  <span class="text-sm text-muted-foreground">de {{ total }}</span>
  <button :disabled="current === total" class="itps-btn itps-btn--ghost itps-btn--icon itps-btn--sm" aria-label="Próximo">
    <span class="material-symbols-outlined">chevron_right</span>
  </button>
</nav>
</template>

<script setup>
import { ref } from 'vue'
const total = 10
const current = ref(1)
</script>

import { useState } from 'react';

export function Pagination() {
const total = 10;
const [current, setCurrent] = useState(1);
return (
  <nav className="inline-flex items-center gap-2">
    <button disabled={current === 1} className="itps-btn itps-btn--ghost itps-btn--icon itps-btn--sm" aria-label="Anterior">
      <span className="material-symbols-outlined">chevron_left</span>
    </button>
    <input
      type="number"
      value={current}
      min={1}
      max={total}
      onChange={(e) => setCurrent(Number(e.target.value))}
      className="itps-input w-16 text-center"
    />
    <span className="text-sm text-muted-foreground">de {total}</span>
    <button disabled={current === total} className="itps-btn itps-btn--ghost itps-btn--icon itps-btn--sm" aria-label="Próximo">
      <span className="material-symbols-outlined">chevron_right</span>
    </button>
  </nav>
);
}

<nav class="inline-flex items-center gap-2">
<button class="itps-btn itps-btn--ghost itps-btn--icon itps-btn--sm" aria-label="Anterior" disabled>
  <span class="material-symbols-outlined">chevron_left</span>
</button>
<input type="number" value="1" min="1" max="10" class="itps-input w-16 text-center" />
<span class="text-sm text-muted-foreground">de 10</span>
<button class="itps-btn itps-btn--ghost itps-btn--icon itps-btn--sm" aria-label="Próximo">
  <span class="material-symbols-outlined">chevron_right</span>
</button>
</nav>

Complex

Adiciona first_page e last_page para tabelas longas onde saltar para extremos é comum.

Página de 42

<Pagination type="complex" total={42} current={5} />

Estados extremos

Botões prev e first desabilitam na página 1. next e last na última.

Página de 5

<Pagination type="complex" total={5} current={1} />
<Pagination type="complex" total={5} current={5} />

Eventos

Componente dispara pagination:change no element pai com detail.page. Escute para refetch ou navegação.

<Pagination total={10} current={1} paginationId="lista-clientes" />

<script>
  document
    .querySelector('[data-pagination-id="lista-clientes"]')
    ?.addEventListener('pagination:change', (e) => {
      const { page } = (e as CustomEvent<{ page: number }>).detail;
      // refetch / route push
    });
</script>

Props

Prop	Tipo	Default	Descrição
`total`	`number`	obrigatório	Total de páginas.
`current`	`number`	`1`	Página inicial.
`type`	`'simple' \| 'complex'`	`'simple'`	Modo simples ou com first/last.
`paginationId`	`string`	auto	ID estável para event delegation.
`class`	`string`	—	Classes adicionais.