Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

Chat

Oppdatert 9. mai 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
    • Plassering av snakkebobler
    • Endring av farger
  • Tilgjengelighet
  • Props
    • Chat
    • Chat.Bubble
  • Tokens

Intro

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

Egnet til:

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

Uegnet til:

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

Har du innspill til komponenten?

Send forslag

Eksempler

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

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:

name?

  • Type:
    string
  • Description:

timestamp?

  • Type:
    string
  • Description:

avatar?

  • Type:
    ReactNode
  • Description:

variant?

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

position?

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

toptextPosition?

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

size?

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

toptextHeadingLevel?

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

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Chat.Bubble

children

  • Type:
    ReactNode
  • Description:

name?

  • Type:
    string
  • Description:

timestamp?

  • Type:
    string
  • Description:

toptextPosition?

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

toptextHeadingLevel?

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

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

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.

© 2025 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