Pagination

A numbered pager with previous and next controls and an ellipsis overflow.

123…9

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun Pagination(page: Int, pageCount: Int, onPage: (Int) -> Unit) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(4.dp),
    ) {
        IconButton(onClick = { onPage(page - 1) }, enabled = page > 1) {
            Icon(Icons.Filled.ChevronLeft, "Previous")
        }
        listOf(1, 2, 3).forEach { n ->
            val on = n == page
            Surface(
                onClick = { onPage(n) },
                shape = CircleShape,
                color = if (on) MaterialTheme.colorScheme.primary
                    else Color.Transparent,
                contentColor = if (on) MaterialTheme.colorScheme.onPrimary
                    else MaterialTheme.colorScheme.onSurface,
            ) {
                Text("$n", Modifier.padding(10.dp),
                    style = MaterialTheme.typography.labelLarge)
            }
        }
        Text("…")
        Text("$pageCount")
        IconButton(onClick = { onPage(page + 1) }, enabled = page < pageCount) {
            Icon(Icons.Filled.ChevronRight, "Next")
        }
    }
}