Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

ReadMore

Vi har ofte situasjoner hvor brukerne trenger en mer utdypende forklaring eller en begrunnelse. ReadMore gjør dette på en god måte. Den består av en knapp som du klikker på for å åpne et tekstpanel.

StabilOppdatert 9. mai 2025
Github FigmaEndringslogg

Egnet til:

  • Forklare vanskelige begreper eller ord
  • Begrunne spørsmål eller konsepter

Uegnet til:

  • Vise ekstra innhold (overflow) i artikler
  • Vise rikt innhold eller filer

Eksempler

Retningslinjer

Tekst på knappen

Teksten på knappen skal skrives slik at bruker forstår hva som vises i panelet som åpnes. Ofte refererer dette til teksten som ligger over knappen. F.eks.: Grunnen til at vi spør om dette.

Brukertester har avdekket at teksten på knappen ikke bør skrives som et spørsmål (Hvorfor spør vi om dette?). Det forvirret brukerne.

Det er enklere å forstå hva ReadMore skal forklare om teksten på knappen er kort, helst én linje.

Pass på
ReadMore med lang setning over 2 linjer
Pass på lange setninger. De er vanskeligere å forstå.
Pass på
ReadMore formulert som et spørsmål
Pass på spørsmålsform. Det kan skape forvirring i kombinasjon med annet innhold.

Plassering i skjema

Bruker du ReadMore for å forklare noe knyttet til et skjemaelement plasserer du det under skjemaelementet. Detaljert forklaring kan du lese i artikkelen Rekkefølge på elementene i et spørsmål.

Innhold

Innholdet i panelet skal forklare eller gi detaljer til teksten som ligger over. Innholdet bør være så enkelt som mulig og ikke for langt. Vi anbefaler ett avsnitt med vanlig tekst eller en liste. Hvis det er mye innhold kan knappen som lukker panelet forsvinner ut av skjermbildet.

Gjør
ReadMore med riktig innhold
ReadMore skal inneholde lite og ren tekst (f.eks. lister og linker).
Unngå
ReadMore med feil innhold
ReadMore skal ikke inneholde flere avsnitt og rikt innhold.

Props

ReadMore

children

  • Type:
    ReactNode
  • Description:

    Content inside ReadMore.

header

  • Type:
    ReactNode
  • Description:

    ReadMore header content.

open?

  • Type:
    boolean
  • Description:

    Opens component if true, closes if false. Using this prop removes automatic control of open-state.

defaultOpen?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Initially open.

onOpenChange?

  • Type:
    ((open: boolean) => void)
  • Description:

    Callback for current open-state

size?

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

    Changes fontsize for content.

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

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-read-more-text--a-text-action
--ac-read-more-hover-bg--a-surface-hover
--ac-read-more-hover-text--a-text-action-hover
--ac-read-more-active-bg--a-surface-active
--ac-read-more-line--a-border-divider