Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Chat

Oppdatert 21. juni 2023Stabil
GithubYarn FigmaEndringslogg

    Intro

    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:

    • Spørsmål og svar
    • Kommunikasjon mellom bruker og chatbots
    • Direktemeldinger mellom person og veileder

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    Unngå lik bakgrunnsfarge i komponenten som på flaten bak.

    Noen ganger ønsker man mer fleksibilitet for plassering av navn + tid i chatboblen.

    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

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

    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 too, but it will be hidden for screen readers.
    variant?"subtle" | "info" | "neutral"
    Changes background color on avatar and bubbles. Avoid using the same background as the surface behind Chat.
    backgroundColor? string
    Background color on bubbles @deprecated Use `variant` instead
    avatarBgColor? string
    Background color for avatar @deprecated Use `variant` instead
    position?"left" | "right"
    Positions avatar and bubbles
    toptextPosition?"left" | "right"
    Hoizontal position of toptext
    size?"medium" | "small"
    Affects padding and font size in bubbles
    className? string
    ref? Ref<HTMLDivElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    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 @deprecated Use `variant` on Chat instead
    toptextPosition? "left" | "right"
    Overrides hoizontal position of toptext
    className? string
    ref? Ref<HTMLDivElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Chat.Bubble extends HTMLDivElement

    Tokens

    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
    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 eller utforsk alle design tokens.

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack