Skip to content
Tabler UX Components

Chat

A conversation: a support ticket thread, comments on an order, messages between team members.

messages is an array of messages, each with the optional keys author, date, text, avatar (an image URL) and me. Each one renders as a Chat:Message row inside Chat:Bubbles. A message with me: true is sent by the current user: its bubble is tinted (chat-bubble-me) and the row is pushed to the end, with the avatar after the bubble.

Messages

Section titled “Messages”

To mix messages with other content, or to loop yourself, put Chat:Message rows in Chat:Bubbles, which stacks them with a gap. Chat:Message takes the same props as a message of the array. Without author and date, the bubble has no title line; without avatar, the row has no avatar column:

The bubble column (col col-lg-6) fills the row next to the avatar, and half of the row from the lg breakpoint, as in Tabler. A long message wraps inside it.

Avatars

Section titled “Avatars”

The avatar prop renders a plain <span class="avatar"> with the picture. Override the avatar block of Chat:Message to show something else, such as initials with Avatar:

Composed

Section titled “Composed”

Pass children to Chat:Message to replace its bubble: the row keeps the avatar and the alignment. Build the bubble with Chat:Bubble and its sub-components. A me row does not tint the bubble you pass: set me on the Chat:Bubble too.

Chat:Bubble:Body holds any content: wrap text in paragraphs, and put images below the text.

Blocks

Section titled “Blocks”

Chat:Bubble takes author, date, text and me too. Override its title or body block, and the other one keeps rendering from the props. Here the body holds a link and bold text:

See Composition for how blocks work.

Typing indicator

Section titled “Typing indicator”

Chat:Typing is a bubble with an italic text followed by animated dots. Its text comes from the children or from label (default “Typing”); always keep a text, the dots alone say nothing. Put it in a Chat:Message row to align it with an avatar. Placed directly in Chat:Bubbles, it sits at the start, as wide as its text.

Accessibility

Section titled “Accessibility”

Keep the messages in reading order and an author name on each bubble: the color and the side alone must not tell who sent a message. The avatar is a decorative background image with no text alternative.

Props

Section titled “Props”

Chat:

Prop Type Default Description
messages array? null Messages (author, date, text, avatar, me), rendered as Chat:Message rows

Other attributes go to the root <div class="chat">.

Chat:Message:

Prop Type Default Description
author string? null Sender name, passed to the bubble
date string? null Time of the message, passed to the bubble
text string? null Message text, passed to the bubble
avatar string? null Sender avatar image URL
me bool false Sent by the current user: tinted bubble, row aligned to the end

Other attributes go to the root <div> of the row.

Chat:Bubble:

Prop Type Default Description
author string? null Sender name, rendered with Chat:Bubble:Title
date string? null Time of the message, rendered with Chat:Bubble:Title
text string? null Message text, in a <p> inside Chat:Bubble:Body
me bool false Sent by the current user (chat-bubble-me)

Other attributes go to the root <div class="chat-bubble">.

Sub-components

Section titled “Sub-components”
Component Renders
Chat:Bubbles <div class="chat-bubbles">: stacks the rows with a gap
Chat:Message <div> with a row: the avatar column and the bubble column, see its props above
Chat:Bubble <div class="chat-bubble">: one message, see its props above
Chat:Bubble:Title <div class="chat-bubble-title"> with a row; author and date (default null)
Chat:Bubble:Author <div class="col chat-bubble-author">
Chat:Bubble:Date <div class="col-auto chat-bubble-date">
Chat:Bubble:Body <div class="chat-bubble-body">
Chat:Typing <div class="chat-bubble align-self-start"> with the text and <span class="animated-dots">; label (default 'Typing') sets the text

Chat:Bubble:Title renders its author and date props with Chat:Bubble:Author and Chat:Bubble:Date; children go inside its row instead.

Blocks

Section titled “Blocks”

Blocks of Chat:

Block Default
content Chat:Bubbles with a Chat:Message per message, when messages is set

Blocks of Chat:Message:

Block Default
avatar <span class="avatar"> with the avatar image, when set
content Chat:Bubble with author, date, text and me: the bubble column

Blocks of Chat:Bubble:

Block Default
title Chat:Bubble:Title with author and date, when one of them is set
body Chat:Bubble:Body with the text prop in a <p>, when set
content title and body: replace it to compose freely

Chat:Typing has a content block, which defaults to the label prop.

Made by SILARHI, released under the MIT license.