Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

Pagination

Oppdatert 9. mai 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Props
    • Pagination
  • Tokens

Intro

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:

  • Å vise fremdrift (se FormProgress/Stepper/ProgressBar)

Har du innspill til komponenten?

Send forslag

Eksempler

Komponenten finnes i størrelsene medium, small og xsmall.

SandboxSandbox
Åpne eksempel i nytt vindu

Ved å skru på propen 'prevNextTexts' får forrige- og neste-knappene synlig tekst i tillegg til chevron.

For å gjøre det lettere for skjermlesere å navigere til Pagination, anbefaler vi å bruke srHeading-prop for å legge til en skjult heading. Husk å bruke riktig h-tag.

Props

Pagination

page

  • Type:
    number
  • Description:

siblingCount?

  • Type:
    number
  • Default:
    1
  • Description:

boundaryCount?

  • Type:
    number
  • Default:
    1
  • Description:

onPageChange?

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

count

  • Type:
    number
  • Description:

size?

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

prevNextTexts?

  • Type:
    boolean
  • Default:
    false
  • Description:

renderItem?

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

srHeading?

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

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLElement>
  • Description:

Tokens

TokenFallback
--ac-pagination-text--a-text-default
--ac-pagination-selected-bg--a-surface-action-selected
--ac-pagination-selected-text--a-text-on-action
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack