Pagination

A neo-brutalist style pagination component built with a built-in pagination range calculation algorithm. Supports responsive pagination range computation (automatic ellipsis display), first/last page quick navigation, configurable sibling count (siblingCount) to control the visible range, multiple variants and size options, full accessibility support (aria-label, aria-current), and clickable ellipsis for custom page-jump interactions.

Demo

Preview

基础用法

变体：默认 / 圆角 / 极简

尺寸：小 / 默认 / 大

siblingCount（相邻页码数）

showFirstLast（首页/末页按钮）

showPageNumbers（页码显示模式）

自定义布局与快速跳转（Jumper）

通过配置 layout 属性，可以自由排列：总条数（total）、每页条数（sizes）、上一页（prev）、页码（pager）、下一页（next）和快速跳转（jumper）。

可点击省略号（jump 事件）

点击省略号 ••• 触发 jump 事件，弹出输入框直接跳转到目标页码。

Installation

pnpm dlx brutx-vue@latest add pagination

Usage

vue

<script setup>
import { ref } from 'vue'
import { Pagination } from 'brutx-ui-vue'

const currentPage = ref(1)
const totalPages = 10
</script>

<template>
    <Pagination
        v-model="currentPage"
        :total-pages="totalPages"
    />
</template>

With Full Options

vue

<script setup>
import { ref } from 'vue'
import { Pagination } from 'brutx-ui-vue'

const currentPage = ref(1)
</script>

<template>
    <Pagination
        v-model="currentPage"
        :total-pages="50"
        :sibling-count="2"
        :show-first-last="true"
        :show-page-numbers="true"
        variant="default"
        size="default"
    />
</template>

Custom Layout & Quick Jumper

Use the layout prop to choose the visible sections, including: total items count (total), page size selector (sizes), previous page (prev), page numbers (pager), next page (next), and quick jumper (jumper). Sections render in the fixed order total, sizes, prev, pager, next, jumper. In the jumper input field, you can input a target page number and press Enter to jump.

vue

<script setup>
import { ref } from 'vue'
import { Pagination } from 'brutx-ui-vue'

const currentPage = ref(1)
const pageSize = ref(10)
</script>

<template>
    <Pagination
        v-model="currentPage"
        v-model:page-size="pageSize"
        :total="100"
        layout="total, sizes, prev, pager, next, jumper"
    />
</template>

Without Page Numbers

When showPageNumbers is set to false, the component displays a counter showing the current page and total pages (e.g., "3 / 10") instead of page number buttons.

vue

<script setup>
import { ref } from 'vue'
import { Pagination } from 'brutx-ui-vue'

const currentPage = ref(1)
</script>

<template>
    <Pagination
        v-model="currentPage"
        :total-pages="10"
        :show-page-numbers="false"
    />
</template>

Clickable Ellipsis

When the total page count is large, the pagination range uses ellipsis ... to represent collapsed page numbers. The ellipsis is a clickable <button> element (with aria-label="Jump pages" for accessibility), which triggers the jump event (no payload) when clicked. Developers can implement custom page-jump interactions in this event, such as showing an input dialog for the user to enter a target page number.

vue

<script setup>
import { ref } from 'vue'
import { Pagination } from 'brutx-ui-vue'

const currentPage = ref(1)

function handleJump() {
    const input = window.prompt('Jump to which page?')
    if (input !== null) {
        const page = Number(input)
        if (Number.isFinite(page)) {
            currentPage.value = page
        }
    }
}
</script>

<template>
    <Pagination
        v-model="currentPage"
        :total-pages="50"
        :sibling-count="1"
        @jump="handleJump"
    />
</template>

Variants

Variant	Description
`default`	Standard button style
`rounded`	Buttons use `--brutal-radius` border radius
`minimal`	Buttons without border and shadow

Sizes

Size	Button Height	Gap	Icon Size
`sm`	`h-8`	`gap-1`	`h-3 w-3`
`default`	`h-10`	`gap-2`	`h-4 w-4`
`lg`	`h-12`	`gap-3`	`h-5 w-5`

API Reference

Pagination — Props
Name	Type	Default	Description
`modelValue` Required	`number`	`—`	The current page number, starting at 1 and synchronized through v-model. Displayed values are clamped to the available page range.
Details Declared type number Default value details Not declared `—` Source Pagination.vue:26 packages/ui/src/components/pagination/Pagination.vue
`totalPages`	`number \| undefined`	`undefined`	The explicit total page count, taking precedence over the total and pageSize calculation.
Details Declared type number \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `undefined` Source Pagination.vue:28 packages/ui/src/components/pagination/Pagination.vue
`total`	`number \| undefined`	`undefined`	The total item count, used to calculate pages and display the total section.
Details Declared type number \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `undefined` Source Pagination.vue:30 packages/ui/src/components/pagination/Pagination.vue
`pageSize`	`number \| undefined`	`10`	The item count per page, used for page calculation and the size selector. Supports v-model:pageSize.
Details Declared type number \| undefined Default value details Declaration `DEFAULT_PAGE_SIZE` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `10` Source Pagination.vue:32 packages/ui/src/components/pagination/Pagination.vue
`pageSizes`	`number[] \| undefined`	`[10, 20, 50, 100]` Factory evaluated per instance	The available values in the page-size selector.
Details Declared type number[] \| undefined Default value details Declaration `() => [...DEFAULT_PAGE_SIZE_OPTIONS]` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `[10, 20, 50, 100]` Source Pagination.vue:34 packages/ui/src/components/pagination/Pagination.vue
`layout`	`string \| undefined`	`"sizes, prev, pager, next, jumper, total"`	Comma-separated section names: total, sizes, prev, pager, next, and jumper. Selects visible sections; their rendering order follows the fixed component layout.
Details Declared type string \| undefined Default value details Declaration `'sizes, prev, pager, next, jumper, total'` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `"sizes, prev, pager, next, jumper, total"` Source Pagination.vue:36 packages/ui/src/components/pagination/Pagination.vue
`disabled`	`boolean \| undefined`	`false`	Disables page navigation, page-size selection, and the jump input.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `false` Source Pagination.vue:38 packages/ui/src/components/pagination/Pagination.vue
`background`	`boolean \| undefined`	`false`	Adds a background to inactive page buttons and previous/next navigation controls.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `false` Source Pagination.vue:40 packages/ui/src/components/pagination/Pagination.vue
`hideOnSinglePage`	`boolean \| undefined`	`false`	Hides the entire pagination navigation when the calculated page count is at most one.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `false` Source Pagination.vue:42 packages/ui/src/components/pagination/Pagination.vue
`siblingCount`	`number \| undefined`	`1`	The number of neighboring pages around the current page, used to determine ellipsis regions.
Details Declared type number \| undefined Default value details Declaration `1` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `1` Source Pagination.vue:43 packages/ui/src/components/pagination/Pagination.vue
`showFirstLast`	`boolean \| undefined`	`true`	Shows first and last page buttons, also requiring the prev and next sections respectively in layout.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `true` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `true` Source Pagination.vue:44 packages/ui/src/components/pagination/Pagination.vue
`showPageNumbers`	`boolean \| undefined`	`true`	Displays page buttons in the pager section. When disabled, shows the current page and total page count instead.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `true` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `true` Source Pagination.vue:45 packages/ui/src/components/pagination/Pagination.vue
`variant`	`"default" \| "minimal" \| "rounded" \| undefined`	`"default"`	The visual variant of the pagination navigation container.
Details Declared type NonNullable<"default" \| "rounded" \| "minimal" \| null \| undefined> \| undefined Literal values `"default"` `"minimal"` `"rounded"` Default value details Declaration `'default'` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `"default"` Source Pagination.vue:46 packages/ui/src/components/pagination/Pagination.vue
`size`	`"default" \| "lg" \| "sm" \| undefined`	`"default"`	The size variant of the pagination navigation and page buttons.
Details Declared type NonNullable<"default" \| "lg" \| "sm" \| null \| undefined> \| undefined Literal values `"default"` `"lg"` `"sm"` Default value details Declaration `'default'` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `"default"` Source Pagination.vue:47 packages/ui/src/components/pagination/Pagination.vue
`class`	`string \| undefined`	`undefined`	Custom CSS classes merged onto the root nav element.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/pagination/Pagination.vue Resolved value `undefined` Source Pagination.vue:48 packages/ui/src/components/pagination/Pagination.vue

Pagination — Events
Name	Signature or type	Description
`@update:modelValue`	`[page: number]`	Emits the target page when a page or navigation button is used or a valid jump is submitted. Also emits an adjusted page when a page-size change places the current page out of range.
Details Declared type [page: number] Source Pagination.vue packages/ui/src/components/pagination/Pagination.vue
`@update:pageSize`	`[size: number]`	Emits the new item count per page when the page-size selector changes.
Details Declared type [size: number] Source Pagination.vue packages/ui/src/components/pagination/Pagination.vue
`@jump`	`[]`	Emitted when an ellipsis button is clicked so the consumer can open custom page-jump controls. The event itself does not change the page.
Details Declared type [] Source Pagination.vue packages/ui/src/components/pagination/Pagination.vue

Accessibility

ARIA Attributes: The root element uses a <nav> tag with role="navigation" and aria-label attributes; page number buttons use the format aria-label="Go to page X"; the current page button is identified with aria-current="page"
Focus Management: Navigation buttons use semantic labels (first page, previous page, next page, last page); disabled states use the disabled attribute with corresponding styles

Pagination ​

Demo ​

基础用法

变体：默认 / 圆角 / 极简

尺寸：小 / 默认 / 大

siblingCount（相邻页码数）

showFirstLast（首页/末页按钮）

showPageNumbers（页码显示模式）

自定义布局与快速跳转（Jumper）

可点击省略号（jump 事件）

Installation ​

Usage ​

With Full Options ​

Custom Layout & Quick Jumper ​

Without Page Numbers ​

Clickable Ellipsis ​

Variants ​

Sizes ​

API Reference ​

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Source

Declared type

Source

Declared type

Source

Accessibility ​

Pagination

Demo

Installation

Usage

With Full Options

Custom Layout & Quick Jumper

Without Page Numbers

Clickable Ellipsis

Variants

Sizes

API Reference

Accessibility