# Pagination

> A navigation landmark for moving between pages of results, composing a `<nav>` root, an `<ul>` list, and `<li>` items around two interactive parts: Pagination.Link for page-number destinations and Pagination.Button for previous/next controls.

```ts
import { Pagination } from "@sdxc/ui";
```

Renders the pagination's `<nav>` root, laying its single Pagination.List child out as a centered row. In dev mode, a root missing
`aria-label`/`aria-labelledby` logs a `console.warn` for assistive tech.

## Examples

```tsx
<Pagination aria-label={t("pagination.label")}>
	<Pagination.List>
		<Pagination.Item>
			<Pagination.Link href="?page=1" aria-current="page">1</Pagination.Link>
		</Pagination.Item>
	</Pagination.List>
</Pagination>
```

## Props

Also accepts everything in `TagProps<"nav">`.


### Pagination.List

Renders the pagination's `<ul>` list, resetting native list markers and spacing and laying Pagination.Item children out as a centered row with a small gap between them.

Also accepts everything in `TagProps<"ul">`.


### Pagination.Item

Renders a single `<li>` wrapping one Pagination.Link or Pagination.Button, centering its content — this element carries no visual styling of its own beyond the layout needed to hold its child.

Also accepts everything in `TagProps<"li">`.


### Pagination.Link

Renders a page-number destination as a native `<a>`.

Takes no props of its own.

### Pagination.Button

Renders a previous/next control as a native `<button>`.

Also accepts everything in `TagProps<"button">`.