Pagination — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::Pagination;
2
3Pagination::new("pagination-main", page, 10)
4    .on_change(usize_cb(cx.listener(|this, p: &usize, _, cx| {
5        this.pagination_page = *p;
6        cx.notify();
7    })))

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

Pagination

Pagination is assembled from these builders. The API reference lists each one.

Customization

Appearance builders and theme tokens Pagination uses.

Styling

Pagination styling
Style	Description
`flex row + items_center + justify_between + gap(px(16.))`	Responsive root layout.
`flex + gap(px(8.)) + cell_text + cell_leading + muted`	Summary text follows the size-specific 12/16, 14/20 and 16/24 font/line-height pairs.
`row flex + items_center + gap(px(4.))`	Link-row layout.
`implicit direct child`	One compound item wrapper.
`cell Size::Md 32px + control_radius + text_size`	Default link geometry and typography.
`instant active refinements; press geometry has no timeline`	Link state interpolation.
`hover_bg / pressed_bg = colors.default.hover()`	Shared hover and pressed fill.
`active branch default.color + shared hover/pressed`	Tertiary-button active-page treatment.
`size(cell) + cell_text + colors.muted`	Ellipsis geometry and colour.
`content width + gap(px(6.)) + nav_padding 10px`	Previous and Next width, gap and padding.
`Size::Sm => 28px / 12px / PRESSED_SCALE_SUBTLE`	Small link variant.
`Size::Sm => nav_padding px(8.)`	Small navigation padding.
`Size::Lg => 36px / 16px / PRESSED_SCALE_FIRM`	Large link variant.
`Size::Lg => nav_padding px(12.)`	Large navigation padding.

API reference

Builders

Pagination builders
Builder	Type	Default	Description
`size(Size)`	`Size`	`Size::Md`	Size of the pagination items.
`new(id, page, total)`	`id, page, total`	—	Pagination parts; the GPUI port generates the compound structure.
`summary(text)`	`text`	—	Summary content such as a visible item range.
`link(render)`	`bool`	`false`	Marks the current page and is handed to the link render closure.
`disabled_keys(keys)`	`bool`	`false`	Disables one page link by page number.
`on_change(callback)`	`Fn(e: ClickEvent) -> ()`	—	Reports a normalized pointer or keyboard press with its page number.
`previous_icon(icon)`	`icon`	`Default chevron SVG`	Custom icon replacing the previous chevron.
`next_icon(icon)`	`icon`	`Default chevron SVG`	Custom icon replacing the next chevron.

Parts

Pagination parts
Part	Description
`Pagination`	Root page-navigation container.
`Pagination`	Optional summary before the links.
`Pagination`	Container for navigation items.
`Pagination`	Implicit wrapper around one item.
`Pagination`	Focusable page-number button.
`Pagination`	Button targeting the previous page.
`Pagination`	Replaceable previous-page icon.
`Pagination`	Button targeting the next page.
`Pagination`	Replaceable next-page icon.
`Pagination`	Non-interactive omitted-page marker.

States

Pagination states
Builder	State	Description
`n == page + link(page, active)`	`Active page`	Current page with tertiary-button fill.
`hover(default.hover())`	`Hovered`	Enabled link or nav-button hover fill.
`tab_stop_handle + with_focus_ring`	`Focused`	Keyboard focus ring.
`is_disabled / disabled_keys gates`	`Disabled`	No press or tab stop, with disabled opacity.
`anim::pressed / pressed_with_background`	`Pressed`	Size-specific scale and default-hover fill.

Accordion Breadcrumbs Disclosure Link Tabs