Skip to main content
Urbicon UI
source

Pagination

Page navigation with customizable range, layouts, intents, and boundary control.

Loading syntax highlighting...

01 Examples

Layouts

Four layout presets cover the common contexts: a full page bar for list views, prev/next-only for article flows, a table footer with row counts, and a minimal page indicator for tight UI.

Default — full page bar

Navigation — prev / next only

Table — info + controls

Minimal — page indicator

Loading syntax highlighting...

02 Customization

slotClasses Override

Widen the gap, tint the info text, and style the ellipsis.
Loading syntax highlighting...

Data Table Row

Table layout embedded in a surface panel — a common real-world pattern.
Loading syntax highlighting...

Pill Buttons

Round buttons via slotClasses on the controls slot.
Loading syntax highlighting...

Terminal Style (unstyled)

Drop all defaults for a monospace, dark-themed pagination.
Loading syntax highlighting...

03 Accessibility

Built-in ARIA

The root <nav> carries role="navigation" and an aria-label. The active page button sets aria-current="page". Disabled boundary buttons expose aria-disabled so screen readers can announce their state.

Keyboard

Tab moves focus between pagination buttons in DOM order. Enter / Space activates the focused button. First/last, prev/next, and numbered buttons are all focusable in natural tab order.

Reduced Motion

Mint effects respect prefers-reduced-motion. Transitions and hover/active feedback are reduced or removed when the user has requested less motion.

04 API Reference

36 props
36 props 2 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt