Pagination

Page navigation. Built from three Figma components in sequence: the Pagination number (Hover, Active, Default), the Pagination arrow (Default, Hover), and the Pagination container that groups them. All values pulled directly from the LUSTER Figma variables.

Figma Properties
Default: bg #F8F7FB · text #24242C
Active: bg #F2EDFF · text #794DFF
Hover: bg #F2EDFF · text #24242C
Padding: 12px 16px
Gap: 4px · Font: Inter 400 / 16px

Tip: click a number to make it active.

Component · Pagination number (Variants)

A single page cell with three states: Hover, Active, Default.

Hover

Active

Default

Component · Pagination arrow (Variants)

Previous / next chevron controls. Two states: Default and Hover.

Default

Hover

Component · Pagination

The full control: previous arrow, page numbers (one Active), and next arrow, with a 4px gap.

Design Tokens

Token names mirror the LUSTER Figma variable paths one-to-one. Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

Token Name	Figma Variable	Default Value
--paginationItemDefaultFontColor	pagination/item/default/font/color	#24242C
--paginationItemDefaultBgColor	pagination/item/default/bg/color	#F8F7FB
--paginationItemHoverFontColor	pagination/item/hover/font/color	#794DFF
--paginationItemHoverBgColor	pagination/item/hover/bg/color	#F2EDFF
--paginationItemActiveFontColor	pagination/item/active/font/color	#794DFF
--paginationItemActiveBgColor	pagination/item/active/bg/color	#F2EDFF
--paginationItemPaddingX	pagination/item/padding/x	16px
--paginationItemPaddingY	pagination/item/padding/y	12px
--paginationItemBorderRadius	pagination/item/border/radius	0px
--paginationGap	pagination/gap	4px
--bodyFontSize	typography/body/font/size	16px
--bodyFontLineHeight	typography/body/font/lineHeight	19px
--bodyFontWeight	typography/body/font/weight	400
--bodyFontFamily	body/font/family	Inter

Usage Guidelines

✓ DO

Clearly mark the current page with the Active state.

✓ DO

Disable the prev/next arrows at the first and last page.

✗ DON'T

Don't show every page for large sets — truncate with an ellipsis.

✗ DON'T

Don't allow more than one Active page at a time.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import './Pagination.css';

export const Pagination = ({ page, pageCount, onChange }) => (
  <nav className="pagination" aria-label="Pagination">
    <button className="pag-cell" disabled={page === 1} onClick={() => onChange(page - 1)}><ChevronsLeft/></button>
    {Array.from({ length: pageCount }, (_, i) => i + 1).map(n => (
      <button
        key={n}
        className={`pag-cell ${n === page ? 'active' : ''}`}
        aria-current={n === page ? 'page' : undefined}
        onClick={() => onChange(n)}
      >{n}</button>
    ))}
    <button className="pag-cell" disabled={page === pageCount} onClick={() => onChange(page + 1)}><ChevronsRight/></button>
  </nav>
);

/* Pagination tokens — Diamond brand, Light mode */
:root {
  /* pagination item — Component Brand */
  --paginationItemDefaultFontColor: #24242C; --paginationItemDefaultBgColor: #F8F7FB;
  --paginationItemHoverFontColor: #794DFF;   --paginationItemHoverBgColor: #F2EDFF;
  --paginationItemActiveFontColor: #794DFF;  --paginationItemActiveBgColor: #F2EDFF;
  /* pagination item — Density / Global */
  --paginationItemPaddingX: 16px; --paginationItemPaddingY: 12px; --paginationItemBorderRadius: 0px;
  --paginationGap: 4px;
  /* Typography */
  --bodyFontFamily: 'Inter', sans-serif; --bodyFontSize: 16px; --bodyFontLineHeight: 19px; --bodyFontWeight: 400;
}

.pagination { display: inline-flex; gap: var(--paginationGap); }
.pag-cell {
  min-width: 44px;
  padding: var(--paginationItemPaddingY) var(--paginationItemPaddingX);
  border-radius: var(--paginationItemBorderRadius); border: none;
  font-family: var(--bodyFontFamily); font-weight: var(--bodyFontWeight); font-size: var(--bodyFontSize); line-height: var(--bodyFontLineHeight);
  cursor: pointer;
  background: var(--paginationItemDefaultBgColor); color: var(--paginationItemDefaultFontColor);
  transition: all 0.15s ease;
}
.pag-cell:hover { background: var(--paginationItemHoverBgColor); color: var(--paginationItemHoverFontColor); }
.pag-cell.active { background: var(--paginationItemActiveBgColor); color: var(--paginationItemActiveFontColor); }

<nav class="pagination" aria-label="Pagination">
  <button class="pag-cell">«</button>
  <button class="pag-cell">1</button>
  <button class="pag-cell active" aria-current="page">3</button>
  <button class="pag-cell">»</button>
</nav>

import { useState } from 'react';
import { Pagination } from '@luster/ui';

export default function List() {
  const [page, setPage] = useState(3);
  return <Pagination page={page} pageCount={5} onChange={setPage} />;
}