Pagination Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

import type { HTMLAttributes } from "react";

/* DevSnips React — PaginationButton
 * Page navigation. Prev + windowed numbers (with ellipses) + Next. Active
 * page uses surface-active + aria-current="page". Prev/Next disable at the
 * bounds (aria-disabled, not removed).
 */

export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";

export interface PaginationButtonProps extends HTMLAttributes<HTMLElement> {
  page?: number;
  totalPages?: number;
  onPageChange?: (page: number) => void;
  size?: ButtonSize;
  siblingCount?: number;
}

function cx(...parts: Array<string | false | null | undefined>): string {
  return parts.filter(Boolean).join(" ");
}

const SIZES: Record<ButtonSize, string> = {
  xs: "h-7 min-w-7 px-2 text-xs [&_svg]:size-[14px]",
  sm: "h-8 min-w-8 px-2.5 text-xs [&_svg]:size-[14px]",
  md: "h-9 min-w-9 px-3 text-[13px] [&_svg]:size-4",
  lg: "h-10 min-w-10 px-3 text-[13px] [&_svg]:size-[18px]",
  xl: "h-11 min-w-11 px-3.5 text-sm [&_svg]:size-5",
};

function range(s: number, e: number): number[] {
  const r: number[] = [];
  for (let i = s; i <= e; i++) r.push(i);
  return r;
}

export function PaginationButton({
  page = 1,
  totalPages = 1,
  onPageChange,
  size = "sm",
  siblingCount = 1,
  className,
  ...rest
}: PaginationButtonProps) {
  function pages(): Array<number | "ellipsis"> {
    if (totalPages <= 7) return range(1, totalPages);
    const left = Math.max(2, page - siblingCount);
    const right = Math.min(totalPages - 1, page + siblingCount);
    const out: Array<number | "ellipsis"> = [1];
    if (left > 2) out.push("ellipsis");
    out.push(...range(left, right));
    if (right < totalPages - 1) out.push("ellipsis");
    out.push(totalPages);
    return out;
  }
  function go(p: number) { if (p >= 1 && p <= totalPages && p !== page) onPageChange?.(p); }

  const BTN =
    "inline-flex select-none items-center justify-center whitespace-nowrap rounded-[var(--ds-radius-sm)] border font-medium leading-none " +
    "transition-colors duration-150 ease-out motion-reduce:transition-none " +
    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)]";
  const GHOST = "border-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)]";
  const ELL = "inline-flex items-center justify-center text-[var(--ds-color-muted-foreground)]";

  return (
    <nav aria-label="Pagination" className={cx("inline-flex items-center gap-1", className)} {...rest}>
      <button
        type="button"
        className={cx(BTN, GHOST, SIZES[size], "px-0", page <= 1 && "pointer-events-none opacity-50")}
        aria-label="Previous page"
        aria-disabled={page <= 1 || undefined}
        disabled={page <= 1}
        onClick={() => go(page - 1)}
      >
        <svg className="h-[1em] w-[1em] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m15 6-6 6 6 6" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </button>
      {pages().map((p, i) =>
        p === "ellipsis" ? (
          <span key={`e${i}`} className={cx(ELL, SIZES[size])} aria-hidden="true">…</span>
        ) : (
          <button
            key={p}
            type="button"
            className={cx(
              BTN,
              p === page
                ? "border-[var(--ds-color-border-strong)] bg-[var(--ds-color-surface-active)] font-semibold"
                : "border-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)]",
              SIZES[size],
            )}
            aria-current={p === page ? "page" : undefined}
            aria-label={`Page ${p}`}
            onClick={() => go(p)}
          >
            {p}
          </button>
        ),
      )}
      <button
        type="button"
        className={cx(BTN, GHOST, SIZES[size], "px-0", page >= totalPages && "pointer-events-none opacity-50")}
        aria-label="Next page"
        aria-disabled={page >= totalPages || undefined}
        disabled={page >= totalPages}
        onClick={() => go(page + 1)}
      >
        <svg className="h-[1em] w-[1em] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m9 6 6 6-6 6" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </button>
    </nav>
  );
}

export default PaginationButton;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

/* DevSnips React — JavaScript parity build.
 * Same API, behavior, and classes as code.tsx; TypeScript types removed.
 * Regenerated from code.tsx — edit code.tsx and re-run the generator.
 */

function cx(...parts) {
  return parts.filter(Boolean).join(" ");
}
const SIZES = {
  xs: "h-7 min-w-7 px-2 text-xs [&_svg]:size-[14px]",
  sm: "h-8 min-w-8 px-2.5 text-xs [&_svg]:size-[14px]",
  md: "h-9 min-w-9 px-3 text-[13px] [&_svg]:size-4",
  lg: "h-10 min-w-10 px-3 text-[13px] [&_svg]:size-[18px]",
  xl: "h-11 min-w-11 px-3.5 text-sm [&_svg]:size-5"
};
function range(s, e) {
  const r = [];
  for (let i = s; i <= e; i++) r.push(i);
  return r;
}
export function PaginationButton({
  page = 1,
  totalPages = 1,
  onPageChange,
  size = "sm",
  siblingCount = 1,
  className,
  ...rest
}) {
  function pages() {
    if (totalPages <= 7) return range(1, totalPages);
    const left = Math.max(2, page - siblingCount);
    const right = Math.min(totalPages - 1, page + siblingCount);
    const out = [1];
    if (left > 2) out.push("ellipsis");
    out.push(...range(left, right));
    if (right < totalPages - 1) out.push("ellipsis");
    out.push(totalPages);
    return out;
  }
  function go(p) {
    if (p >= 1 && p <= totalPages && p !== page) onPageChange?.(p);
  }
  const BTN = "inline-flex select-none items-center justify-center whitespace-nowrap rounded-[var(--ds-radius-sm)] border font-medium leading-none transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)]";
  const GHOST = "border-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)]";
  const ELL = "inline-flex items-center justify-center text-[var(--ds-color-muted-foreground)]";
  return <nav aria-label="Pagination" className={cx("inline-flex items-center gap-1", className)} {...rest}>
      <button
    type="button"
    className={cx(BTN, GHOST, SIZES[size], "px-0", page <= 1 && "pointer-events-none opacity-50")}
    aria-label="Previous page"
    aria-disabled={page <= 1 || undefined}
    disabled={page <= 1}
    onClick={() => go(page - 1)}
  >
        <svg className="h-[1em] w-[1em] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m15 6-6 6 6 6" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </button>
      {pages().map(
    (p, i) => p === "ellipsis" ? <span key={`e${i}`} className={cx(ELL, SIZES[size])} aria-hidden="true">…</span> : <button
      key={p}
      type="button"
      className={cx(
        BTN,
        p === page ? "border-[var(--ds-color-border-strong)] bg-[var(--ds-color-surface-active)] font-semibold" : "border-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)]",
        SIZES[size]
      )}
      aria-current={p === page ? "page" : undefined}
      aria-label={`Page ${p}`}
      onClick={() => go(p)}
    >
            {p}
          </button>
  )}
      <button
    type="button"
    className={cx(BTN, GHOST, SIZES[size], "px-0", page >= totalPages && "pointer-events-none opacity-50")}
    aria-label="Next page"
    aria-disabled={page >= totalPages || undefined}
    disabled={page >= totalPages}
    onClick={() => go(page + 1)}
  >
        <svg className="h-[1em] w-[1em] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m9 6 6 6-6 6" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </button>
    </nav>;
}

export default PaginationButton;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# Pagination Button

Page navigation for paginated lists and tables. Renders Prev, a windowed number set with ellipses, and Next. The active page uses `surface-active` + `aria-current="page"`. Prev/Next disable at the bounds (kept perceivable, not removed).

## Installation

This component requires **React** and **Tailwind CSS**. Drop `code.tsx` (or `code.jsx` for JavaScript projects) into your project. Tailwind utility classes are included directly in the component, so no separate CSS file is required.

The component consumes the DevSnips semantic design tokens through Tailwind arbitrary values (for example `bg-[var(--ds-color-primary)]`). Define the `--ds-*` tokens once in your theme — see [React/DESIGN_TOKENS.md](../../../DESIGN_TOKENS.md) for the full token spec.

## Usage

```tsx
<PaginationButton page={page} totalPages={12} onPageChange={setPage} />
```

## JavaScript

A `code.jsx` build is provided for projects that ship plain JSX. It exposes the same API and behavior as `code.tsx` — only the TypeScript types are removed.

## Props

| Prop | Type | Default |
|---|---|---|
| `page` | `number` | `1` (current) |
| `totalPages` | `number` | `1` |
| `onPageChange` | `(page: number) => void` | — |
| `size` | `ButtonSize` | `sm` |
| `siblingCount` | `number` | `1` (pages shown either side of current) |

Plus all native `HTMLAttributes<HTMLElement>`.

## Variants

Single ghost style. Prev/Next are icon-only; numbered pages are square-ish buttons. Active page: `surface-active` + `aria-current="page"` + border-strong.

## Sizes

xs (28px) · sm (32px) · **md (36px, default)** · lg (40px) · xl (44px). Horizontal padding scales 8 → 20px; icons scale 14 → 20px. Default is `sm`.

## States

default · hover · focus-visible · current (`aria-current="page"`, surface-active + border-strong) · disabled Prev/Next at bounds (`aria-disabled`, reduced opacity).

## Accessibility

Renders a `<nav aria-label="Pagination">`. Each page button has `aria-label="Page N"`; the current page has `aria-current="page"`. Prev/Next have `aria-label` and `aria-disabled` at the bounds (kept visible so the affordance stays perceivable). Focus-visible ring on every control.

## Styling

Tailwind classes are included directly in the component and consume the DevSnips semantic design tokens (`--ds-*`) via arbitrary values. The button themes with the surface automatically in light and dark mode. No component-specific CSS file is needed.

## Design Tokens

See [React/DESIGN_TOKENS.md](../../../DESIGN_TOKENS.md) for the authoritative token specification. This button uses the semantic color, radius, and motion tokens; define them once in your project theme and every button in the family stays in sync.

## Notes

Keep `siblingCount` modest (1–2) so the control stays compact. For very large counts, consider a jump-to-page input alongside.