Aksel
Komponenter / Core

Chat

StabilOPPDATERT 15. desember 2022
GithubYarn FigmaEndringslogg

Komponenten brukes for å kommunisere dialoger mellom to parter, ofte en veileder og bruker. Chat-komponenten legger opp til en umiddelbar samtale, gitt at en veileder eller chatbot er tilgjengelig i andre enden.

Egnet til å:

  • Tidssensitive eller mindre omfattende spørsmål og svar
  • Sette opp kommunikasjon mellom bruker og chatbots
  • Tilrettelegge for direktemeldinger mellom person og veileder uten direkte kontakt

Har du innspill til komponenten?

Send forslag
Kom i gang som designeraksel.nav.noInstalleraksel.nav.no

Eksempler

Åpne i nytt vindu

Varianter

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 du prater med har venstrestilt.

Endring av farger

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

Tilgjengelighet

KommandoInteraksjon
TabFlytter fokus til neste snakkeboble
ShiftTabFlytter fokus til forrige snakkeboble

Props

Chat

children ReactNode
Children of type <Chat.Bubble />
name? string
Chat-message name
timestamp? string
Timestamp for sent message
avatar ReactNode
Avatar for messenger. Regular text for initials works to
backgroundColor? string
Background color on bubbles
avatarBgColor? string
Background color for avatar
position?"left" | "right"
Positions avatar and Bubbles
toptextPosition?"left" | "right"
Hoizontal position of toptext
className? string
ref? Ref<HTMLDivElement>
Chat extends HTMLDivElement

Chat.Bubble

children ReactNode
Bubble text
name? string
name/sender on bubble
timestamp? string
Timestamp for sent message
backgroundColor? string
Background color on bubble
toptextPosition? "left" | "right"
Overrides hoizontal position of toptext
className? string
ref? Ref<HTMLDivElement>
Chat.Bubble extends HTMLDivElement

Tokens

TokenFallback
--ac-chat-avatar-bg--a-bg-subtle
--ac-chat-avatar-color--a-text-default
--ac-chat-bubble-bg--a-bg-subtle
--ac-chat-top-text--a-text-default
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 for mer info.

Var denne artikkelen til hjelp?