Pagination

New

A pagination navigation component built with DaisyUI's .join pattern. Compose <c-pagination.item> children inside <c-pagination> to create accessible page controls that render as links or buttons depending on context.

API Reference

c-pagination (container)

Attribute	Description	Type	Default
`size`	Size context passed to child items	string	`md`

c-pagination.item

Attribute	Description	Type	Default
`href`	When set, renders as `<a>`; otherwise `<button>`	string	`""`
`label`	Accessible `aria-label` for icon-only items	string	`""`
`active`	Marks the current page with `btn-active`	boolean	`False`
`disabled`	Disables interaction with `btn-disabled`	boolean	`False`
`size`	Button size variant	string	`md`

Landmark: the container renders as <nav aria-label="Pagination">, making it discoverable by screen reader landmark navigation.

Icon-only items: always provide a label prop for previous/next buttons that contain only an icon, so screen readers announce a meaningful name.

Active page: consider adding aria-current="page" to the active item via attrs to assist assistive technology.

Examples

Usage


<c-pagination>
  <c-pagination.item href="/page/1">1</c-pagination.item>
  <c-pagination.item href="/page/2" active>2</c-pagination.item>
  <c-pagination.item href="/page/3">3</c-pagination.item>
</c-pagination>

Basic Pages

<c-pagination>
  <c-pagination.item href="#">1</c-pagination.item>
  <c-pagination.item href="#" active>2</c-pagination.item>
  <c-pagination.item href="#">3</c-pagination.item>
</c-pagination>

With Previous / Next

<c-pagination>
  <c-pagination.item href="#" label="Previous page">
    <c-icon name="chevron-left" />
  </c-pagination.item>
  <c-pagination.item href="#">1</c-pagination.item>
  <c-pagination.item href="#" active aria-current="page">2</c-pagination.item>
  <c-pagination.item href="#">3</c-pagination.item>
  <c-pagination.item href="#" label="Next page">
    <c-icon name="chevron-right" />
  </c-pagination.item>
</c-pagination>

Disabled Items

1 2 3

<c-pagination.item disabled label="Previous page">
  <c-icon name="chevron-left" />
</c-pagination.item>

Sizes

<c-pagination>
  <c-pagination.item href="#" size="sm">1</c-pagination.item>
  <c-pagination.item href="#" size="sm" active>2</c-pagination.item>
  <c-pagination.item href="#" size="sm">3</c-pagination.item>
</c-pagination>