Pagination

Paginated view with page navigation controls.
betaView sourceReka UI
vue
<script setup lang="ts">
import { Pagination } from '@typlog/ui'
</script>

<template>
  <Pagination
    :total="100"
    :items-per-page="10"
    show-edges
  >
  </Pagination>
</template>

API Reference ​

Pagination ​

PropDefaultType
color
–
Color
navigation
–
"none""all""prev-next""first-last"
size
–
"1""2""3""4"
variant
–
"soft""outline""surface""ghost"

Examples ​

Size ​

vue
<script setup lang="ts">
import { Pagination } from '@typlog/ui'
</script>

<template>
  <div class="flex flex-col gap-4">
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      size="1"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      size="2"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      size="3"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      size="4"
    />
  </div>
</template>

Variant ​

vue
<script setup lang="ts">
import { Pagination } from '@typlog/ui'
</script>

<template>
  <div class="flex flex-col gap-4">
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      color="indigo"
      variant="ghost"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      color="indigo"
      variant="outline"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      color="indigo"
      variant="soft"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      color="indigo"
      variant="surface"
    />
  </div>
</template>

Color ​

vue
<script setup lang="ts">
import { Pagination } from '@typlog/ui'
</script>

<template>
  <div class="flex flex-col gap-4">
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      color="gray"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      color="indigo"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      color="crimson"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      color="violet"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      color="amber"
    />
  </div>
</template>

Controls for showing “Previous”, “Next”, “First”, and “Last” page buttons.

vue
<script setup lang="ts">
import { Pagination } from '@typlog/ui'
</script>

<template>
  <div class="flex flex-col gap-4">
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      navigation="none"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      navigation="prev-next"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      navigation="first-last"
    />
    <Pagination
      :total="200"
      :items-per-page="10"
      show-edges
      variant="soft"
      navigation="all"
    />
  </div>
</template>

Without Edges ​

Without show-edges attribute, there will be no pagination ellipsis.

vue
<script setup lang="ts">
import { Pagination } from '@typlog/ui'
</script>

<template>
  <Pagination
    :total="200"
    :items-per-page="10"
    variant="soft"
  />
</template>