Loading...
Skip to Content (Press Enter)
Live Style Guide
Home
Styles
UI Patterns
Widgets
Screen Templates
Overview
Content
Accordion
Alert
Balloon
Blank Slate
Bullets
Card
Card Background
Card Sectioned
Carousel
Chat Message
Lightbox Image
Modal
Panel
Section
Tag
Tooltip
Controls
Animated Label
Button Group
Date Picker
Dropdown
Dropdown Select
File Upload
Floating Actions
Input With Icon
Range Slider
Range Slider Interval
Search
Search Balloon
Time Picker
Toggle Button
Video
Emails
Email 3 Rows
Email Section
Layout Email
Layout
Layout Login
Layout Login Split
Layout Popup
Navigation
Breadcrumbs
Navigation Bar
Section Index
Sidebar
Tabs
Timeline
Wizard
Numbers
Badge
Counter
Icon Badge
Progress Bar
Progress Circle
User Initials
Responsive
Display On Device
Load On Visible
Move On Device
Responsive Table Records
Structure
Align Center
Columns2
Columns3
Columns4
Columns5
Columns6
Columns Medium Left
Columns Medium Right
Columns Small Left
Columns Small Right
Gallery
Utilities
Animate
Button Loading
Character Count
Fieldset
Flip Content
Iframe
Separator
Stacked Icon
Chat Message
Display conversational content such as user photo, text, images, delivery time and status.
SR
Scott Richie
A well a don't you know about the bird?
Well, everybody knows that the bird is the word
17:46:05
SR
Helen Stafford
Not again...
17:49:05
SR
Scott Richie
A well a bird, bird, b-bird's the word
17:51:05
When to use
A Chat Message is used to display conversation posts in notifications or chat screens.
Is Inline
Displays user messages without a box in the background.
SR
Scott Richie
Hello World!
17:46:05
See more information on implementing this pattern in the
product documentation