Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

block · pagination

Pagination

A wrapping native page-navigation list with application-owned URLs, range generation and current-page state.

Install with npx @madojs/ui@latest add pagination.

Composition

  • Use a labelled nav with a native list of real page links, one aria-current page and optional decorative ellipsis.

Public API

class mado-ui-pagination / list / item / link / ellipsis
Pagination landmark, list and link presentation.
attribute aria-current="page"
Marks exactly one current page link.
attribute aria-disabled="true"
Styles a link-shaped unavailable control; omit href and prevent application activation.

Detected public classes

  • .mado-ui-pagination
  • .mado-ui-pagination-ellipsis
  • .mado-ui-pagination-item
  • .mado-ui-pagination-link
  • .mado-ui-pagination-list

Detected public CSS properties

  • --mado-ui-color-action
  • --mado-ui-color-action-contrast
  • --mado-ui-color-action-hover
  • --mado-ui-color-border
  • --mado-ui-color-surface-soft
  • --mado-ui-color-text-muted
  • --mado-ui-focus-ring
  • --mado-ui-pagination-current-background
  • --mado-ui-pagination-current-border
  • --mado-ui-pagination-current-color
  • --mado-ui-pagination-disabled-background
  • --mado-ui-pagination-disabled-border
  • --mado-ui-pagination-disabled-color
  • --mado-ui-pagination-ellipsis-color
  • --mado-ui-pagination-focus-ring
  • --mado-ui-pagination-gap
  • --mado-ui-pagination-justify
  • --mado-ui-pagination-link-background
  • --mado-ui-pagination-link-border
  • --mado-ui-pagination-link-color
  • --mado-ui-pagination-link-hover-background
  • --mado-ui-pagination-link-hover-color
  • --mado-ui-pagination-link-min-size
  • --mado-ui-pagination-link-padding
  • --mado-ui-pagination-link-radius
  • --mado-ui-radius-sm
  • --mado-ui-space-1
  • --mado-ui-space-2
  • --mado-ui-space-3

Accessibility contract

  • Every destination has a useful accessible name and a real URL so navigation works without JavaScript.
  • A disabled-looking anchor is not disabled by ARIA alone; remove href and guard delegated activation, or omit it entirely.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.