Pagination

A presentational pagination nav built from composable sub-components: links, previous/next controls, and an ellipsis.

<.pagination></.pagination>

Examples

With ellipsis

Previous, numbered links, ellipsis, and next.

<.pagination>
  <.pagination_content>
    <.pagination_item>
      <.pagination_previous href="#" />
    </.pagination_item>
    <.pagination_item>
      <.pagination_link href="#">1</.pagination_link>
    </.pagination_item>
    <.pagination_item>
      <.pagination_link href="#" is_active={true}>2</.pagination_link>
    </.pagination_item>
    <.pagination_item>
      <.pagination_link href="#">3</.pagination_link>
    </.pagination_item>
    <.pagination_item>
      <.pagination_ellipsis />
    </.pagination_item>
    <.pagination_item>
      <.pagination_link href="#">10</.pagination_link>
    </.pagination_item>
    <.pagination_item>
      <.pagination_next href="#" />
    </.pagination_item>
  </.pagination_content>
</.pagination>

Show code

Compact — default size links

Use size="default" for text-label links instead of icon-sized ones.

<.pagination>
  <.pagination_content>
    <.pagination_item>
      <.pagination_previous href="#" />
    </.pagination_item>
    <.pagination_item>
      <.pagination_link href="#" size="default">Page 1</.pagination_link>
    </.pagination_item>
    <.pagination_item>
      <.pagination_link href="#" size="default" is_active={true}>Page 2</.pagination_link>
    </.pagination_item>
    <.pagination_item>
      <.pagination_link href="#" size="default">Page 3</.pagination_link>
    </.pagination_item>
    <.pagination_item>
      <.pagination_next href="#" />
    </.pagination_item>
  </.pagination_content>
</.pagination>

Show code

Props

Name	Type	Default	Values
class	:string
rest	:global
inner_block (slot)	:slot