Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

Chat

Chat-komponenten viser en dialog mellom to eller flere parter.

StabilOppdatert 9. mai 2025

Egnet til:

  • Kommunikasjon mellom bruker og chatbot
  • Direktemeldinger mellom bruker og veileder

Uegnet til:

  • Chat i sanntid (fordi meldinger ikke blir lest opp automatisk)

Eksempler

Plassering av snakkebobler

Komponenten kommer med to plasseringer for selve snakkeboblene og avataren, right/left. Det er en vanlig konvensjon at den som ser dialogen alltid har sine snakkebobler høyrestilt, og den eller de du prater med har venstrestilt.

Endring av farger

Man kan endre farge på både avatar og snakkeboble. Disse kan brukes for å tydeliggjøre hvem som snakker.

Tilgjengelighet

Avataren er skjult fra hjelpemidler (aria-hidden) fordi eventuelle initialer her ville blitt lest opp uten kontekst. Vi anbefaler å bruke name-propen for å kommunisere avsender på en tilgjengelig måte.

Foreløpig er det ikke støtte for automatisk opplesning av meldinger som settes inn dynamisk.

Props

Chat

children

  • Type:
    ReactNode
  • Description:

    Children of type <Chat.Bubble />.

name?

  • Type:
    string
  • Description:

    Name/sender on first bubble.

timestamp?

  • Type:
    string
  • Description:

    Timestamp on first bubble.

avatar?

  • Type:
    ReactNode
  • Description:

    We recommend using an SVG or plain text initials as avatar.

    Hidden for screen readers.

variant?

  • Type:
    "subtle" | "info" | "neutral"
  • Default:
    ""neutral""
  • Description:

    Changes background color on avatar and bubbles. Avoid using the same background as the surface behind Chat.

position?

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

    Positions avatar and bubbles.

toptextPosition?

  • Type:
    "left" | "right"
  • Default:
    "Same as position"
  • Description:

    Horizontal position of toptext.

size?

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

    Affects padding and font size in bubbles.

toptextHeadingLevel?

  • Type:
    "2" | "3" | "4" | "5" | "6"
  • Default:
    ""3""
  • Description:

    The heading level for the toptext.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

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

Chat.Bubble

children

  • Type:
    ReactNode
  • Description:

    Bubble text.

name?

  • Type:
    string
  • Description:

    Name/sender on bubble.

timestamp?

  • Type:
    string
  • Description:

    Timestamp for sent message.

toptextPosition?

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

    Overrides hoizontal position of toptext.

toptextHeadingLevel?

  • Type:
    "2" | "3" | "4" | "5" | "6"
  • Default:
    "3"
  • Description:

    The heading level for the toptext.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • 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-chat-avatar-bg--a-surface-neutral-subtle
--ac-chat-avatar-color--a-text-default
--ac-chat-bubble-bg--a-surface-neutral-subtle
--ac-chat-top-text--a-text-default