Pagination
Paginated view with page navigation controls.
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
Use the ui prop to add classes to the pagination root, list, page items, ellipsis, and each navigation control (first, previous, next, and last). Classes are additive to the component's default classes.
| Prop | Default | Type |
|---|---|---|
| color | "gray" | |
| navigation | "all" | "all""first-last""none""prev-next" |
| size | "2" | "1""2""3""4" |
| ui | – | PaginationUI Classes for the component's stable visual parts. |
| variant | "ghost" | "ghost""outline""soft""surface" |
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>Navigation
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> Last updated Sep 15, 2026