Hopp til innhold
Aksel

Komponenter

Pagination

Pagination lar deg bla mellom flere sider og vise hvilken side du er på.

Egnet til:

  • Søkeresultater som er delt inn i flere sider
  • Store mengder data som er delt inn i flere sider, for eksempel tabeller.

Uegnet til:

Eksempler

Retningslinjer

Legg merke til at denne komponenten ikke er responsiv, så du må gjøre egne tilpasninger for mobil. En mulighet er å bytte til en annen komponent på mobil, for eksempel Select.

Tokens

Komponent-tokens ble fjernet i versjon 8

Gammel dokumentasjon for disse finner du på jsDelivr

Props

Pagination

page

  • Type:
    number
  • Description:

    Current page.

    Pagination indexing starts at 1.

siblingCount?

  • Type:
    number
  • Default:
    1
  • Description:

    Number of always visible pages before and after the current page.

boundaryCount?

  • Type:
    number
  • Default:
    1
  • Description:

    Number of always visible pages at the beginning and end.

onPageChange?

  • Type:
    ((page: number) => void)
  • Description:

    Callback when current page changes.

count

  • Type:
    number
  • Description:

    Total number of pages.

size?

  • Type:
    "medium" | "small" | "xsmall"
  • Default:
    "medium"
  • Description:

    Changes padding, height and font-size.

prevNextTexts?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Display text alongside "previous" and "next" icons.

renderItem?

  • Type:
    ((item: RenderItemProps) => ReactNode | Promise<ReactNode>)
  • Default:
    PaginationItem
  • Description:

    Override pagination item rendering.

srHeading?

  • Type:
    { tag: "h2" | "h3" | "h4" | "h5" | "h6"; text: string; }
  • Description:

    Pagination heading. We recommend adding heading instead of aria-label to help assistive technologies with an extra navigation-stop.

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Pagination.Item

children

  • Type:
    ReactNode
  • Description:

    Button content.

selected?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Sets selected styling if true

size?

  • Type:
    "medium" | "small" | "xsmall"
  • Default:
    "medium"
  • Description:

    Changes padding, height and font-size

variant?

  • Type:
    "primary" | "secondary" | "tertiary" | HiddenVariant
  • Default:
    "primary"
  • Description:

    Changes design and interaction-visuals.

disabled?

  • Type:
    boolean
  • Description:

    Avoid using if possible for accessibility purposes.

    Prevent the user from interacting with the button: it cannot be pressed or focused.

loading?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Replaces button content with a Loader component, keeps width.

icon?

  • Type:
    ReactNode
  • Description:

    Button Icon.

iconPosition?

  • Type:
    "left" | "right"
  • Default:
    "left"
  • Description:

    Icon position in Button.

data-color?

  • Type:
    "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "meta-purple" | "meta-lime" | "brand-beige" | "brand-blue" | "brand-magenta"
  • Description:

    Overrides inherited color.

    We recommend only using accent, neutral and danger. @see 🏷️ {@link AkselColor } @see 📝 Documentation

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLAnchorElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

page?

  • Deprecated:
    Use `data-page` instead if you need to access the items page number in the future.
  • Type:
    number
  • Description:

    Currently only sets data-page attribute.

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

Forvalter

Team
Aksel
Artikkel oppdatert 9. juli 2026
Rapporter en bug
Om du har funnet en bug eller noe som ikke henger på greip kan du gi beskjed på GitHub.
Rapporter en bug
Slack
For lavterskel deling og hjelp kan du bruke Slack-kanalen for å stille spørsmål og diskutere løsninger.
Slack