Paginator styling
The styled wrapper exposes stable classes for range text, movement controls, page buttons, and the page-size select.
| Hook | Use |
|---|---|
.tng-paginator | Layout, wrapping behavior, disabled opacity, and size state. |
.tng-paginator__range | Current result range text. |
.tng-paginator__button | Movement and numbered page controls. |
.tng-paginator__button[aria-current='page'] | Active page styling. |
.tng-paginator__select | Rows-per-page select styling and focus ring. |
CSS starter
tng-paginator {
--tng-semantic-accent-brand: oklch(0.58 0.17 250);
--tng-semantic-border-subtle: oklch(0.9 0.02 250);
--tng-semantic-background-surface: white;
--tng-semantic-focus-ring: oklch(0.68 0.16 250 / 0.35);
}