Contents

Hikari
Guides
Design
- Overview
System
Components — Layer 1
Components — Layer 2
Components — Layer 3

Pagination

Pagination component for data paging.

Basic Usage

(live preview unavailable)

Add a ```hikari:tsx block after ```hikari:rust to enable TSX preview

1

2

3

4

5

6

7

8

rsx! {
    div { style: "padding:1rem;display:flex;gap:4px;align-items:center;font-size:14px;",
        button { style: "padding:4px 10px;border:1px solid #ccc;border-radius:4px;cursor:pointer;", "‹" }
        span { style: "padding:4px 10px;background:#3a6ea5;color:#fff;border-radius:4px;", "1" }
        button { style: "padding:4px 10px;border:1px solid #ccc;border-radius:4px;cursor:pointer;", "2" }
        button { style: "padding:4px 10px;border:1px solid #ccc;border-radius:4px;cursor:pointer;", "›" }
    }
}

API

Property	Description	Type	Default
total	Total count	usize	0
page_size	Items per page	usize	10
current	Current page	usize	1