Chat

Chat is a component for communicating a dialog between two or more parties.

Read more about this component in the Aksel documentation.

Hi! My name is Eva.

What can I help you with?

Hi Eva.

Where can I check the status of my parental leave application?

Properties

Property	Description	Default	Control
Properties
"data-color"	Overriding Chat color is not supported. `unknown`	-
avatar	We recommend using an SVG or plain text initials as avatar. Hidden for screen readers. `Snippet` `string`	-
name	Name/sender on first bubble. `string`	-
position	Positions avatar and bubbles. `"left"` `"right"`	`"left"`
size	Affects padding and font size in bubbles. `"medium"` `"small"`	`"medium"`
timestamp	Timestamp on first bubble. `string`	-
toptextHeadingLevel	The heading level for the toptext. `"2"` `"3"` `"4"` `"5"` `"6"`	`"3"`
toptextPosition	Horizontal position of toptext. `"left"` `"right"`	-
variant	Changes background color on avatar and bubbles. Avoid using the same background as the surface behind Chat. `"subtle"` `"info"` `"neutral"`	`"neutral"`
Snippets
children	Children of type `<ChatBubble />`.		-
avatar	We recommend using an SVG or plain text initials as avatar. Hidden for screen readers.		-

Properties included from: HTMLAttributes<HTMLDivElement>

ChatBubble is a subcomponent of Chat for displaying individual message bubbles.

Read more about this component in the Aksel documentation.

Property	Description	Default	Control
Properties
name	Name/sender on bubble. `string`	-
timestamp	Timestamp for sent message. `string`	-
toptextHeadingLevel	The heading level for the toptext. `"2"` `"3"` `"4"` `"5"` `"6"`	-
toptextPosition	Overrides horizontal position of toptext. `"left"` `"right"`	-
Snippets
children	Bubble text.		-

Properties included from: HTMLAttributes<HTMLDivElement>