Pagination

Pagination is a compound component for paged navigation.

Root Props

Prop	Type	Default
`ref`	`Ref<HTMLUListElement>`	—
Ref forwarded to the underlying list element.
`size`	`PaginationSize`	`'md'`
Visual size of the pagination items, inherited from IconButtonProps. Controls padding, font size, or spacing according to the design system scale.
`variant`	`PaginationVariant`	`'primary'`
Visual variant of the component. Inherits available values from `IconButtonProps['variant']`, such as 'primary' or 'secondary'. Controls the visual style (color, background, border) according to the design system.

Also accepts all <ul> attributes.

Prop	Type	Default
`current`	`boolean`	—
Marks this item as the currently active page. Applies visual emphasis.
`asChild`	`boolean`	—
When true, renders the button as a child component using `Slot` (e.g., from Radix UI). Enables polymorphic rendering — useful for making the button act as a link or custom tag.
`size`	`ButtonSize`	—
Defines the size of the button. Affects padding, font size, and overall dimensions.
`fullWidth`	`boolean`	—
When true, the button expands to fill the width with its container.
`variant`	`ButtonBaseVariant`	—
Defines the visual style of the button, affecting color schemes and emphasis.
`appearance`	`ButtonBaseAppearance`	—
Adjusts the button's structural appearance (background, border, etc.).
`disabled`	`boolean`	—
Disables the button when true. Prevents user interaction and applies a visually disabled state. Not applied with `asChild`: the child element owns its disabled state, for example, `aria-disabled` or a link without `href`.
`className`	`string`	—
Optional custom CSS class for the button element. Useful for design system overrides or scoped styles.
`children`	`ReactNode`	—
Content of the button — text, icon, or any React node.
`ref`	`Ref<HTMLButtonElement>`	—
Ref forwarded to the native `<button>` element. Allows direct DOM access for focus management or measuring.

Also accepts all <button> attributes.

Prop	Type	Default
`size`	`IconButtonSize`	—
Size of the button container. Controls padding and overall clickable area.
`asChild`	`boolean`	—
When true, renders the button as a child component using `Slot` (e.g., from Radix UI). Enables polymorphic rendering — useful for making the button act as a link or custom tag.
`variant`	`ButtonBaseVariant`	—
Defines the visual style of the button, affecting color schemes and emphasis.
`appearance`	`ButtonBaseAppearance`	—
Adjusts the button's structural appearance (background, border, etc.).
`disabled`	`boolean`	—
Disables the button when true. Prevents user interaction and applies a visually disabled state. Not applied with `asChild`: the child element owns its disabled state, for example, `aria-disabled` or a link without `href`.
`className`	`string`	—
Optional custom CSS class for the button element. Useful for design system overrides or scoped styles.
`children`	`ReactNode`	—
Content of the button — text, icon, or any React node.
`ref`	`Ref<HTMLButtonElement>`	—
Ref forwarded to the native `<button>` element. Allows direct DOM access for focus management or measuring.

Also accepts all <button> attributes.

Prop	Type	Default
`asChild`	`boolean`	—
When true, renders the button as a child component using `Slot` (e.g., from Radix UI). Enables polymorphic rendering — useful for making the button act as a link or custom tag.
`size`	`ButtonSize`	—
Defines the size of the button. Affects padding, font size, and overall dimensions.
`fullWidth`	`boolean`	—
When true, the button expands to fill the width with its container.
`variant`	`ButtonBaseVariant`	—
Defines the visual style of the button, affecting color schemes and emphasis.
`appearance`	`ButtonBaseAppearance`	—
Adjusts the button's structural appearance (background, border, etc.).
`disabled`	`boolean`	—
Disables the button when true. Prevents user interaction and applies a visually disabled state. Not applied with `asChild`: the child element owns its disabled state, for example, `aria-disabled` or a link without `href`.
`className`	`string`	—
Optional custom CSS class for the button element. Useful for design system overrides or scoped styles.
`children`	`ReactNode`	—
Content of the button — text, icon, or any React node.
`ref`	`Ref<HTMLButtonElement>`	—
Ref forwarded to the native `<button>` element. Allows direct DOM access for focus management or measuring.

Also accepts all <button> attributes.

Also accepts all <li> attributes.

Prop	Type	Default
`variant`	`PaginationVariant`	—
Visual style variant of the text.
`size`	`TextSize`	—
Visual size of the text, typically mapped to the design system’s type scale.
`asChild`	`boolean`	—
If true, renders the text as a child component using `Slot`. Useful for compatibility with native elements or other components.
`fontWeight`	`400 \| 500 \| 600 \| 700 \| 900`	`500`
Font weight applied to the text. Common values: 400: Regular; 500: Medium; 600: Semi-bold; 700: Bold; 900: Extra bold
`ref`	`Ref<HTMLSpanElement>`	—
Ref to the underlying `<span>` or slotted element. Useful for measuring, focusing, or DOM manipulation.

Also accepts all <span> attributes.

The root only provides shared style context.
Current page, disabled boundaries, and routing behavior are owned by the parent feature.
PaginationItem current sets aria-current='page'.