Komponenter

Timeline

Tidslinjen gir en visuell oversikt over perioder i kronologisk rekkefølge. Periodene kan gjøres klikkbare, slik at du kan vise utfyllende informasjon. Tidslinjen fungerer ikke på mobil, og skal bare brukes på interne flater.

Egnet til:

Bruk på interne flater
Fullskjermvisning
Oversikt over hva som har skjedd i bestemte perioder

Uegnet til:

Mobile grensesnitt

Eksempler

App.tsx
<Box marginInline="auto" maxWidth="800px">
  <Timeline>
    <Timeline.Row label="Person" icon={<PersonIcon aria-hidden />}>
      {person.map((p) => (
        <Timeline.Period
          key={p.id}
          start={p.start}
          end={p.end}
          status={p.status}
          icon={p.icon}
          statusLabel={p.statusLabel}
          onSelectPeriod={() => setActivePeriod(p.id)}
          isActive={activePeriod === p.id}
          aria-controls="timeline-panel"
          id={p.id}
        />
      ))}
    </Timeline.Row>
    <Timeline.Row label="Sykehus A" icon={<HospitalIcon aria-hidden />}>
      {jobb.map((p) => (
        <Timeline.Period
          key={p.id}
          start={p.start}
          end={p.end}
          status={p.status}
          icon={p.icon}
          statusLabel={p.statusLabel}
          onSelectPeriod={() => setActivePeriod(p.id)}
          isActive={activePeriod === p.id}
          aria-controls="timeline-panel"
          id={p.id}
        />
      ))}
    </Timeline.Row>
  </Timeline>
  {activePeriod && (
    <Box
      aria-controls={activePeriod}
      id="timeline-panel"
      marginBlock="space-32 space-0"
   >{`${activePeriod}: ${
      [...person, ...jobb].find((p) => p.id === activePeriod)?.start
    }`}</Box>
  )}
</Box>

Retningslinjer

Bruk av ikoner og farger

Bruk ikon, som eksemplene viser, for å kommunisere type periode. Komponenten kommer med 5 innebygde statuser som bestemmer farge og tilgjengelig tekst:

Status	Farge	Tilgjengelig tekst
success	--ax-bg-success-moderate	Suksess fra ${start} til ${end}
warning	--ax-bg-warning-moderate	Advarsel fra ${start} til ${end}
danger	--ax-bg-danger-moderate	Fare fra ${start} til ${end}
info	--ax-bg-info-moderate	Info fra ${start} til ${end}
neutral	--ax-bg-neutral-moderate	Nøytral fra ${start} til ${end}

Du kan overskrive statusen i den tilgjengelige teksten ved å bruke propen statusLabel.

Minimum bredde

Avhengig av hvilken tidsperiode som blir vist (startDate/endDate) og antall perioder vil komponenten kreve en viss bredde for at innholdet skal komme tydelig frem. Vær forsiktig med å legge inn for mange perioder, og vurder å legge til horisontal stegvis skroll som i eksempelet “Dynamic”.

Tilgjengelighet

Tastaturinteraksjon

Mulighet for bruk av pil opp/ned er lagt til for å lettere kunne navigere mellom radene.

Interaksjon med skjermleser

Hvis aria-controls er satt på en periode i tidslinja og panelet, kan de som bruker Jaws hoppe fram/tilbake med hurtigtasten Alt+Jaws+m. Jaws-tasten er enten Insert eller CapsLock, avhengig av hvilket tastaturoppsett som er valgt i Jaws.

Mulige utfordringer med WCAG

Vær oppmerksom på at komponenten ikke er responsiv.

Tokens

Gammel dokumentasjon for disse finner du på jsDelivr

Props

Timeline

startDate?: Type:
Date
Description:
Decides startingpoint in timeline. Defaults to earliest date among the timeline periods.

Using this disables use of ZoomButtons. You will need to control zooming yourself.
endDate?: Type:
Date
Description:
Decides end-date for timeline. Defaults to the latest date among the timeline periods.

Using this disables use of ZoomButtons. You will need to control zooming yourself.
direction?: Type:
"left" | "right"
Default:
"left"
Description:
Decides direction which periods are sorted/displayed. "left" ascends from earliest date on left.
className?: Type:
string
axisLabelTemplates?: Deprecated:
Use `<Provider />`-component
Type:
AxisLabelTemplates
Description:
Templates for label texts. The templates are passed to the date-fns format function. Defaults to { day: "dd.MM", month: "MMM yy", year: "yyyy" }.

Timeline.Row

className?: Type:
string
label: Type:
string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined
Description:
Label for the timeline row as either string or React.ReactNode

Note: When using React.ReactNode, icon and headingTag props are not available
headingTag?: Type:
"h2" | "h3" | "h4" | "h5" | "h6"
Default:
"h3"
Description:
Heading level for the label e.g h2, h3...
icon?: Type:
ReactNode
Description:
Icon next to label
ref?: Type:
Ref<HTMLOListElement>
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

Timeline.Period

start: Type:
Date
Description:
Period start date.
end: Type:
Date
Description:
Period end date.
icon?: Type:
ReactNode
Description:
Icon for easier visual identification.
status?: Type:
"success" | "warning" | "danger" | "info" | "neutral"
Default:
"neutral"
Description:
Period status.
data-color?: Type:
"accent" | "neutral" | "info" | "success" | "warning" | "danger" | "meta-purple" | "meta-lime" | "brand-beige" | "brand-blue" | "brand-magenta"
Description:
Overrides color set by status. @see 🏷️ {@link AkselColor } @see 📝 Documentation
statusLabel?: Type:
string
Description:
Status label for screen-readers e.g "Sykemeldt", "foreldrepermisjon"
onSelectPeriod?: Type:
((event: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>) => void)
Description:
Callback when selecting a period.
children?: Type:
ReactNode
Description:
Content displayed in Popover on click.
isActive?: Type:
boolean
Description:
Visual active inidcation on period.

Make sure only one period is active at a time.
placement?: Type:
"top" | "bottom"
Default:
"top"
Description:
Default orientation of popover
className?: Type:
string
ref?: Type:
Ref<HTMLDivElement | HTMLButtonElement>
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

Timeline.Pin

date: Type:
Date
Description:
Date position for the pin.
children?: Type:
ReactNode
Description:
Content in Pin Popover.
className?: Type:
string
ref?: Type:
Ref<HTMLButtonElement>
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

Timeline.Zoom

className?: Type:
string
ref?: Type:
Ref<HTMLUListElement>
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

Timeline.ZoomButton

label: Type:
string
Description:
e.g 3mnd, 6mnd etc
interval: Type:
"month" | "year"
Description:
Zoom interval in months or years
count: Type:
number
Description:
How many units of the interval that will be applied e.g interval="month" + count={3} equals 3 months
ref?: Type:
Ref<HTMLButtonElement>
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

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.

Slack

For lavterskel deling og hjelp kan du bruke Slack-kanalen for å stille spørsmål og diskutere løsninger.

Timeline

Egnet til:

Uegnet til:

Eksempler

Retningslinjer

Bruk av ikoner og farger

Minimum bredde

Tilgjengelighet

Tastaturinteraksjon

Interaksjon med skjermleser

Mulige utfordringer med WCAG

Tokens

Komponent-tokens ble fjernet i versjon 8

Props

Timeline

startDate?

endDate?

direction?

className?

axisLabelTemplates?

Timeline.Row

className?

label

headingTag?

icon?

ref?

Timeline.Period

start

end

icon?

status?

data-color?

statusLabel?

onSelectPeriod?

children?

isActive?

placement?

className?

ref?

Timeline.Pin

date

children?

className?

ref?

Timeline.Zoom

className?

ref?

Timeline.ZoomButton

label

interval

count

ref?