@vibe-labs/design-components-pagination

Pagination component tokens, styles, and TypeScript types for the Vibe Design System.

Installation

@import "@vibe-labs/design-components-pagination";

import type { PaginationStyleProps, PaginationItemStyleProps } from "@vibe-labs/design-components-pagination/types";

Contents

Tokens (pagination.css)

CSS custom properties defined in @layer vibe.tokens:

Token	Default	Description
--pagination-gap	--space-1	Gap between items
--pagination-item-size	2rem	Min width and height
--pagination-item-radius	--radius-md	Border radius
--pagination-item-font-size	--text-sm	Font size
--pagination-item-font-weight	400	Default weight
--pagination-item-color	--text-secondary	Text color
--pagination-item-bg	transparent	Background
--pagination-item-hover-bg	--surface-hover-overlay	Hover background
--pagination-item-active-bg	--color-accent	Active page background
--pagination-item-active-color	--color-accent-contrast	Active page text
--pagination-item-active-font-weight	--font-semibold	Active page weight
--pagination-item-disabled-opacity	--input-disabled-opacity	Disabled opacity
--pagination-ellipsis-color	--text-muted	Ellipsis color

Generated Styles (pagination.g.css)

Component classes generated into @layer vibe.components.

Elements

• pagination — flex row container, reset list styles
• pagination-item — interactive page button with hover/active/focus/disabled states. aria-current marks the active page (accent bg, contrast text, no pointer)
• pagination-ellipsis — non-interactive … placeholder

TypeScript Types (types/)

interface PaginationStyleProps {}
interface PaginationItemStyleProps {
  disabled?: boolean;
}
interface PaginationEllipsisStyleProps {}

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
pagination.css	Token definitions
pagination.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (colors, surfaces, spacing, typography, transitions, elevation).

Build

npm run build

---

Usage Guide

Import

@import "@vibe-labs/design-components-pagination";

import type { PaginationItemStyleProps } from "@vibe-labs/design-components-pagination/types";

Variants

Attribute / State	Values	Notes
aria-current="page"	on item	Marks active page (accent bg)
disabled	boolean attr	Reduced opacity, pointer-events: none

No data-variant or data-size — styling is controlled by tokens only.

Examples

Basic pagination

<nav aria-label="Pagination">
  <ul class="pagination">
    <li><button class="pagination-item" aria-label="Previous">‹</button></li>
    <li><button class="pagination-item">1</button></li>
    <li><button class="pagination-item" aria-current="page">2</button></li>
    <li><button class="pagination-item">3</button></li>
    <li><button class="pagination-item" aria-label="Next">›</button></li>
  </ul>
</nav>

With ellipsis

<nav aria-label="Pagination">
  <ul class="pagination">
    <li><button class="pagination-item" aria-label="Previous">‹</button></li>
    <li><button class="pagination-item">1</button></li>
    <li><span class="pagination-ellipsis">…</span></li>
    <li><button class="pagination-item">4</button></li>
    <li><button class="pagination-item" aria-current="page">5</button></li>
    <li><button class="pagination-item">6</button></li>
    <li><span class="pagination-ellipsis">…</span></li>
    <li><button class="pagination-item">12</button></li>
    <li><button class="pagination-item" aria-label="Next">›</button></li>
  </ul>
</nav>

With disabled prev/next

<nav aria-label="Pagination">
  <ul class="pagination">
    <li><button class="pagination-item" disabled aria-label="Previous">‹</button></li>
    <li><button class="pagination-item" aria-current="page">1</button></li>
    <li><button class="pagination-item">2</button></li>
    <li><button class="pagination-item">3</button></li>
    <li><button class="pagination-item" aria-label="Next">›</button></li>
  </ul>
</nav>

First/last page buttons

<nav aria-label="Pagination">
  <ul class="pagination">
    <li><button class="pagination-item" aria-label="First page">«</button></li>
    <li><button class="pagination-item" aria-label="Previous">‹</button></li>
    <li><button class="pagination-item" aria-current="page">5</button></li>
    <li><button class="pagination-item" aria-label="Next">›</button></li>
    <li><button class="pagination-item" aria-label="Last page">»</button></li>
  </ul>
</nav>

With Vue

<template>
  <nav aria-label="Pagination">
    <ul class="pagination">
      <li v-for="item in pages" :key="item.value">
        <span v-if="item.ellipsis" class="pagination-ellipsis">…</span>
        <button
          v-else
          class="pagination-item"
          :aria-current="item.value === currentPage ? 'page' : undefined"
          :disabled="item.disabled"
          @click="$emit('change', item.value)"
        >
          {{ item.label }}
        </button>
      </li>
    </ul>
  </nav>
</template>