Components / navigation

Pagination Item

One control in Pagination: a page number, or the Previous/Next arrow.

import { PaginationItem } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { PaginationItem } from '@basiiik/ui';

<PaginationItem>Pagination Item</PaginationItem>
  • Hover and Focused are CSS. Selected is selected (aria-current=page). Disabled is disabled, rendered as aria-disabled so it stays focusable.
  • Storybook: Navigation/Pagination.

Props

PropTypeNotes
type"number" | "next" | "previous"Default "number"
childrennative attribute
selectedboolean
disablednative attribute

States. Hover and Focused are CSS. Selected is selected (aria-current=page). Disabled is disabled, rendered as aria-disabled so it stays focusable.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

  • Items inside Pagination

Do not use it when

  • Standalone use

Rules for agents

  • Prefer Pagination, which renders the items, gaps and arrows from page and pageCount
  • Use PaginationItem directly only for a custom layout, inside a <nav aria-label>
  • Set type="previous" or "next" for the arrows (they get default names) and selected on the current page
  • A disabled item keeps focus (aria-disabled), so keyboard users can still find it

Avoid

  • Standalone PaginationItems outside a pagination nav
  • Hiding the Previous arrow on the first page instead of disabling it

Keyboard

  • Enter activates

Accessibility

  • aria-current="page" on the selected item
  • aria-label "Previous page" and "Next page" on arrows
  • aria-disabled on the first Previous and last Next

Colour tokens it reads

color.bg.brand.defaultcolor.bg.subtlecolor.border.focuscolor.icon.disabledcolor.icon.primarycolor.text.disabledcolor.text.on-brandcolor.text.primary

Related

navigation 13 Figma variants Try it in the live demo