React Pagination Component Styling

Pagination Styling

Learn how to customize the React Pagination component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.

On this page

CSS variables

React pagination uses local CSS variables on .pagination for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

scss

$pagination-tokens: defaults(
  (
    --cui-pagination-min-height: var(--cui-btn-input-min-height),
    --cui-pagination-padding-x: var(--cui-btn-input-padding-x),
    --cui-pagination-padding-y: var(--cui-btn-input-padding-y),
    --cui-pagination-font-size: var(--cui-btn-input-font-size),
    --cui-pagination-color: var(--cui-link-color),
    --cui-pagination-bg: var(--cui-bg-body),
    --cui-pagination-border-width: var(--cui-border-width),
    --cui-pagination-border-color: var(--cui-border-color),
    --cui-pagination-border-radius: var(--cui-btn-input-border-radius),
    --cui-pagination-transition: #{"color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out"},
    --cui-pagination-hover-color: var(--cui-link-hover-color),
    --cui-pagination-hover-bg: var(--cui-bg-1),
    --cui-pagination-hover-border-color: var(--cui-border-color),
    --cui-pagination-focus-color: var(--cui-link-hover-color),
    --cui-pagination-focus-bg: var(--cui-bg-1),
    --cui-pagination-active-color: var(--cui-primary-contrast),
    --cui-pagination-active-bg: var(--cui-primary-bg),
    --cui-pagination-active-border-color: var(--cui-primary-bg),
    --cui-pagination-disabled-color: var(--cui-fg-3),
    --cui-pagination-disabled-bg: var(--cui-bg-2),
    --cui-pagination-disabled-border-color: var(--cui-border-color),
  ),
  $pagination-tokens
);

How to use CSS variables

const customVars = {
  '--cui-pagination-color': '#555',
  '--cui-pagination-bg': '#fff',
}

return <CPagination style={customVars}>{/* Pagination content */}</CPagination>

Sass maps

Each entry is one .pagination-{size} class, and the map merges with your overrides — add a key to define a size, or set one to null to drop it:

scss

$pagination-sizes: defaults(
  ("sm", "lg"),
  $pagination-sizes
);

Sass loops

Each size remaps the pagination’s tokens onto the shared --cui-btn-input-* scale, so a new entry in $pagination-sizes picks up whatever that scale defines for it.

scss

@each $size, $_ in $pagination-sizes {
  .pagination-#{$size} {
    --cui-pagination-min-height: var(--cui-btn-input-#{$size}-min-height);
    --cui-pagination-padding-y: var(--cui-btn-input-#{$size}-padding-y);
    --cui-pagination-padding-x: var(--cui-btn-input-#{$size}-padding-x);
    --cui-pagination-font-size: var(--cui-btn-input-#{$size}-font-size);
    --cui-pagination-border-radius: var(--cui-btn-input-#{$size}-border-radius);
  }
}