---
url: "https://vueda.dev/v3/reference/theming/keys/PaginationItem.md"
title: "PaginationItem"
---

# PaginationItem

Source: `client/lib/theme/vueda-tailwind/navigation/index.js`

> Numbered page control. Composes the Button base and switches between outline active and ghost inactive variants, with Button size tiers (defaulting to an icon square). The active item keeps a foreground-colored edge at rest so the current page stands apart from the lighter navigation buttons.

Vue component: [PaginationItem](/v3/reference/api/vue/PaginationItem.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/PaginationItem.md#theme-key-PaginationItem-root) | callback | Numbered page control. Composes the Button base and switches between outline active and ghost inactive variants, with Button size tiers (defaulting to an icon square). The active item keeps a foreground-colored edge at rest so the current page stands apart from the lighter navigation buttons. |

<a id="theme-key-PaginationItem-root"></a>

## root

> Numbered page control. Composes the Button base and switches between outline active and ghost inactive variants, with Button size tiers (defaulting to an icon square). The active item keeps a foreground-colored edge at rest so the current page stands apart from the lighter navigation buttons.

Callback:

```javascript
({ isActive, size }) => ({
            composes: ["_ButtonBase.root", isActive ? "_ButtonOutline.root" : "_ButtonGhost.root"],
            class: [
                {
                    "h-vueda-control px-vueda-control-px has-[>svg]:px-vueda-control-px-sm": size === "default",
                    "h-vueda-control-sm gap-1.5 px-vueda-control-px-sm": size === "sm",
                    "h-vueda-control-lg px-vueda-control-px-lg has-[>svg]:px-vueda-control-px": size === "lg",
                    "size-vueda-control": !size || size === "icon",
                    "size-vueda-control-sm": size === "icon-sm",
                    "size-vueda-control-lg": size === "icon-lg",
                },
                isActive && "!hairline-foreground",
            ],
        })
```

Source: `client/lib/theme/vueda-tailwind/navigation/PaginationItem.theme.js:17`