> ## Documentation Index
> Fetch the complete documentation index at: https://mahmoud-b28887f9.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# KPdfViewerToolbar: connected toolbar for PDF controls

> Add page summary, zoom controls, save, share, and thumbnail toggle to your PDF viewer with KPdfViewerToolbar. Fully customizable via config and style objects.

`KPdfViewerToolbar` is a horizontally scrollable row of `AssistChip` controls that connects directly to a `KPdfViewerState`. It displays a live page summary, zoom percentage, zoom in/out buttons, a save action, a share action, and a thumbnail strip toggle — all driven by the same state instance you pass to `KPdfViewer`. Every visible element, label, icon, and visual style is replaceable through configuration objects.

## Signature

```kotlin theme={null}
@Composable
fun KPdfViewerToolbar(
    state: KPdfViewerState,
    isThumbnailStripVisible: Boolean,
    onThumbnailToggle: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    onZoomInClick: (() -> Unit)? = { state.zoomIn() },
    onZoomOutClick: (() -> Unit)? = { state.zoomOut() },
    onSaveClick: (() -> Unit)? = { state.requestSave() },
    onShareClick: (() -> Unit)? = null,
    config: KPdfViewerToolbarConfig = KPdfViewerToolbarConfig.defaults(),
    style: KPdfViewerToolbarStyle = KPdfViewerToolbarStyle.defaults(),
)
```

## Parameters

<ParamField path="state" type="KPdfViewerState" required>
  The shared state holder. The toolbar observes `loadState`, `currentPageIndex`, and `currentZoom` to render live values and enable or disable controls.
</ParamField>

<ParamField path="isThumbnailStripVisible" type="Boolean" required>
  Controls the appearance of the thumbnail toggle chip and is the source of truth for strip visibility. Manage this with a `remember { mutableStateOf(true) }` in the parent composable.
</ParamField>

<ParamField path="onThumbnailToggle" type="(Boolean) -> Unit" required>
  Called when the user taps the thumbnail toggle chip. The argument is the new desired visibility value. Update your `isThumbnailStripVisible` state here.
</ParamField>

<ParamField path="modifier" type="Modifier" default="Modifier">
  Applied to the outer toolbar container. Use it to set width, padding, or elevation.
</ParamField>

<ParamField path="onZoomInClick" type="(() -> Unit)?" default="{ state.zoomIn() }">
  Called when the user taps the zoom-in chip. Disabled automatically when the current zoom equals `state.config.maxZoom`. Pass `null` to hide the chip entirely via `KPdfViewerToolbarVisibility`.
</ParamField>

<ParamField path="onZoomOutClick" type="(() -> Unit)?" default="{ state.zoomOut() }">
  Called when the user taps the zoom-out chip. Disabled automatically when the current zoom equals `state.config.minZoom`. Pass `null` to hide the chip entirely via `KPdfViewerToolbarVisibility`.
</ParamField>

<ParamField path="onSaveClick" type="(() -> Unit)?" default="{ state.requestSave() }">
  Called when the user taps the save chip. The default triggers the SDK-integrated save/export flow. Pass `null` to remove the chip.
</ParamField>

<ParamField path="onShareClick" type="(() -> Unit)?" default="null">
  Called when the user taps the share chip. No default implementation is provided — supply your own platform-specific share logic. The chip is hidden when this is `null` unless you set `showShare = true` in `KPdfViewerToolbarVisibility`.
</ParamField>

<ParamField path="config" type="KPdfViewerToolbarConfig" default="KPdfViewerToolbarConfig.defaults()">
  Controls which chips are visible and what text and icons they display. See [KPdfViewerToolbarConfig](#kpdfviewertoolbarconfig) below.
</ParamField>

<ParamField path="style" type="KPdfViewerToolbarStyle" default="KPdfViewerToolbarStyle.defaults()">
  Controls the visual appearance of the toolbar container and its chips. See [KPdfViewerToolbarStyle](#kpdfviewertoolbarstyle) below.
</ParamField>

## KPdfViewerToolbarConfig

`KPdfViewerToolbarConfig` groups the three configuration objects that control what the toolbar shows and how it labels its controls.

```kotlin theme={null}
data class KPdfViewerToolbarConfig(
    val visibility: KPdfViewerToolbarVisibility,
    val strings: KPdfViewerToolbarStrings,
    val icons: KPdfViewerToolbarIcons,
)
```

Call `KPdfViewerToolbarConfig.defaults()` to get the default instance, then use `.copy(...)` to override individual fields.

### KPdfViewerToolbarVisibility

Controls which chips render in the toolbar. All fields default to `true`.

<ParamField path="showPageSummary" type="Boolean" default="true">
  Show the page summary chip (e.g. "Page 3 / 12").
</ParamField>

<ParamField path="showZoomOut" type="Boolean" default="true">
  Show the zoom-out chip.
</ParamField>

<ParamField path="showZoomPercentage" type="Boolean" default="true">
  Show the current zoom percentage chip (e.g. "150%").
</ParamField>

<ParamField path="showZoomIn" type="Boolean" default="true">
  Show the zoom-in chip.
</ParamField>

<ParamField path="showSave" type="Boolean" default="true">
  Show the save chip.
</ParamField>

<ParamField path="showShare" type="Boolean" default="true">
  Show the share chip.
</ParamField>

<ParamField path="showThumbnailToggle" type="Boolean" default="true">
  Show the thumbnail strip toggle chip.
</ParamField>

### KPdfViewerToolbarStrings

Provides the label text for each chip. Lambda fields receive live values from state so you can format strings dynamically.

<ParamField path="pageSummaryText" type="(currentPage: Int, pageCount: Int) -> String">
  Formats the page summary label. Default: `"Page 3 / 12"`. Receives the 1-based current page number and the total page count.
</ParamField>

<ParamField path="zoomPercentageText" type="(zoomPercent: Int) -> String">
  Formats the zoom percentage label. Default: `"150%"`.
</ParamField>

<ParamField path="zoomOutText" type="String" default="&#x22;Zoom Out&#x22;">
  Label for the zoom-out chip.
</ParamField>

<ParamField path="zoomInText" type="String" default="&#x22;Zoom In&#x22;">
  Label for the zoom-in chip.
</ParamField>

<ParamField path="saveText" type="String" default="&#x22;Save&#x22;">
  Label for the save chip.
</ParamField>

<ParamField path="shareText" type="String" default="&#x22;Share&#x22;">
  Label for the share chip.
</ParamField>

<ParamField path="thumbnailToggleText" type="(isVisible: Boolean) -> String">
  Formats the thumbnail toggle label based on current strip visibility. Default: `"Hide Thumbnails"` when visible, `"Show Thumbnails"` when hidden.
</ParamField>

### KPdfViewerToolbarIcons

Supplies a leading icon composable for each chip. All fields are optional — pass `null` to render a chip with no icon.

<ParamField path="pageSummaryIcon" type="(@Composable () -> Unit)?">
  Icon shown in the page summary chip.
</ParamField>

<ParamField path="zoomPercentageIcon" type="(@Composable () -> Unit)?">
  Icon shown in the zoom percentage chip.
</ParamField>

<ParamField path="zoomOutIcon" type="(@Composable () -> Unit)?">
  Icon shown in the zoom-out chip.
</ParamField>

<ParamField path="zoomInIcon" type="(@Composable () -> Unit)?">
  Icon shown in the zoom-in chip.
</ParamField>

<ParamField path="saveIcon" type="(@Composable () -> Unit)?">
  Icon shown in the save chip.
</ParamField>

<ParamField path="shareIcon" type="(@Composable () -> Unit)?">
  Icon shown in the share chip.
</ParamField>

<ParamField path="thumbnailVisibleIcon" type="(@Composable () -> Unit)?">
  Icon shown in the thumbnail toggle chip when the strip is currently visible.
</ParamField>

<ParamField path="thumbnailHiddenIcon" type="(@Composable () -> Unit)?">
  Icon shown in the thumbnail toggle chip when the strip is currently hidden.
</ParamField>

## KPdfViewerToolbarStyle

Controls the visual appearance of the toolbar container and every chip variant. Call `KPdfViewerToolbarStyle.defaults()` for a Material3-matched default, then `.copy(...)` to override individual fields.

<ParamField path="minChipWidth" type="Dp" default="88.dp">
  Minimum width applied to every chip. Increase this to keep chips a consistent size when labels vary in length.
</ParamField>

<ParamField path="containerShape" type="Shape" default="RoundedCornerShape(24.dp)">
  Shape of the toolbar background container.
</ParamField>

<ParamField path="chipShape" type="Shape" default="RoundedCornerShape(18.dp)">
  Shape applied to every chip.
</ParamField>

<ParamField path="containerGradientColors" type="List<Color>">
  Horizontal gradient colors for the toolbar background. Defaults to a surface-to-surfaceVariant gradient derived from `MaterialTheme.colorScheme`.
</ParamField>

<ParamField path="containerBorderColor" type="Color">
  Color of the 1 dp border around the toolbar container.
</ParamField>

<ParamField path="chipColor" type="Color">
  Background color for default-appearance chips (interactive action chips).
</ParamField>

<ParamField path="tonalChipColor" type="Color">
  Background color for tonal chips (the zoom percentage display).
</ParamField>

<ParamField path="accentChipColor" type="Color">
  Background color for accent chips (the page summary and active thumbnail toggle).
</ParamField>

<ParamField path="contentPadding" type="Dp" default="14.dp">
  Padding inside the toolbar container, around the chip row.
</ParamField>

<ParamField path="itemSpacing" type="Dp" default="10.dp">
  Horizontal spacing between chips.
</ParamField>

## Default usage

```kotlin theme={null}
@Composable
fun PdfScreen(source: KPdfSource) {
    val viewerState = rememberPdfViewerState(source = source)
    var thumbnailsVisible by remember { mutableStateOf(true) }

    Column(modifier = Modifier.fillMaxSize()) {
        KPdfViewerToolbar(
            state = viewerState,
            isThumbnailStripVisible = thumbnailsVisible,
            onThumbnailToggle = { thumbnailsVisible = it },
            modifier = Modifier
                .fillMaxWidth()
                .padding(12.dp),
        )

        KPdfViewer(
            state = viewerState,
            modifier = Modifier.fillMaxWidth().weight(1f),
        )
    }
}
```

<Note>
  `onShareClick` defaults to `null`, so the share chip is not interactive unless you provide a handler. The chip still renders when `showShare = true` in `KPdfViewerToolbarVisibility`. To implement sharing, call `viewerState.exportPdf()` and pass the resulting bytes to your platform share sheet.
</Note>

## Full customization example

Override labels, icons, visibility, and style in a single call using `.copy(...)` on the defaults.

```kotlin theme={null}
KPdfViewerToolbar(
    state = viewerState,
    isThumbnailStripVisible = thumbnailsVisible,
    onThumbnailToggle = { thumbnailsVisible = it },
    onShareClick = { sharePdf() },
    config = KPdfViewerToolbarConfig.defaults().copy(
        visibility = KPdfViewerToolbarVisibility(
            showPageSummary = true,
            showZoomOut = true,
            showZoomPercentage = true,
            showZoomIn = true,
            showSave = true,
            showShare = true,
            showThumbnailToggle = true,
        ),
        strings = KPdfViewerToolbarStrings.defaults().copy(
            zoomOutText = "Smaller",
            zoomInText = "Bigger",
            saveText = "Export",
            shareText = "Send",
            thumbnailToggleText = { visible ->
                if (visible) "Close Strip" else "Open Strip"
            },
        ),
        icons = KPdfViewerToolbarIcons.defaults().copy(
            zoomOutIcon = { Icon(Icons.Default.ZoomOut, contentDescription = "Zoom out") },
            zoomInIcon = { Icon(Icons.Default.ZoomIn, contentDescription = "Zoom in") },
            saveIcon = { Icon(Icons.Default.Save, contentDescription = "Save") },
            shareIcon = { Icon(Icons.Default.Share, contentDescription = "Share") },
        ),
    ),
    style = KPdfViewerToolbarStyle.defaults().copy(
        minChipWidth = 96.dp,
    ),
)
```

<Tip>
  Replace the default text glyphs (`"+"`, `"-"`, `"S"`) with Material Icons by overriding `KPdfViewerToolbarIcons`. The icon composable type is `@Composable () -> Unit`, so you can pass any composable content.
</Tip>