Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

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.

StabilOppdatert 4. juni 2025
Github FigmaEndringslogg

Egnet til:

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

Uegnet til:

  • Mobile grensesnitt

Eksempler

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:

StatusFargeTilgjengelig tekst
success--a-surface-success-subtleSuksess fra ${start} til ${end}
warning--a-surface-warning-subtleAdvarsel fra ${start} til ${end}
danger--a-surface-danger-subtleFare fra ${start} til ${end}
info--a-surface-info-subtleInfo fra ${start} til ${end}
neutral--a-bg-subtleNø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.

Tilgjengelighet

Tastaturinteraksjon

Mulighet for bruk av pil opp/ned er lagt til for å lettere kunne navigere seg gjennom tidslinjen uten å tabbe gjennom alle periodene.

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 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.

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

data-color?

  • Type:
    (string & {}) | AkselColor

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

label

  • Type:
    string
  • Description:

    Label for the timeline row

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

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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.

statusLabel?

  • Type:
    string
  • Description:

    Status label for screen-readers e.g "Sykemeldt", "foreldrepermisjon"

onSelectPeriod?

  • Type:
    ((e: MouseEvent<HTMLButtonElement, MouseEvent>) => 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

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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.Zoom.Button

label

  • Type:
    string
  • Description:

    e.g 3mnd, 6mnd etc

interval

  • Type:
    "month" | "year"
  • Default:
    "null"
  • 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:
    LegacyRef<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

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

TokenFallback
--ac-timeline-row-bg--a-surface-subtle
--ac-timeline-row-active-bg--a-surface-selected
--ac-timeline-period-success-bg--a-surface-success-subtle
--ac-timeline-period-success-border--a-border-success
--ac-timeline-period-success-bg-hover--a-surface-success-subtle-hover
--ac-timeline-period-warning-bg--a-surface-warning-subtle
--ac-timeline-period-warning-border--a-border-warning
--ac-timeline-period-warning-bg-hover--a-surface-warning-subtle-hover
--ac-timeline-period-danger-bg--a-surface-danger-subtle
--ac-timeline-period-danger-border--a-border-danger
--ac-timeline-period-danger-bg-hover--a-surface-danger-subtle-hover
--ac-timeline-period-info-bg--a-surface-info-subtle
--ac-timeline-period-info-border--a-border-info
--ac-timeline-period-info-bg-hover--a-surface-info-subtle-hover
--ac-timeline-period-neutral-bg--a-bg-subtle
--ac-timeline-period-neutral-border--a-border-default
--ac-timeline-period-neutral-bg-hover--a-gray-200
--ac-timeline-period-selected-border--a-border-action-selected
--ac-timeline-pin-bg--a-surface-danger
--ac-timeline-pin-bg-hover--a-surface-danger-hover
--ac-timeline-zoom-border--a-border-default
--ac-timeline-zoom-bg--a-surface-default
--ac-timeline-zoom-bg-hover--a-surface-action-subtle-hover
--ac-timeline-zoom-selected-bg--a-surface-inverted
--ac-timeline-zoom-selected-text--a-text-on-inverted
--ac-timeline-axislabel-text--a-text-subtle