Chat bubble, Message bubble, Conversation bubble
Bubble
ECT approvedUpdated May 23, 2026
Description
- Chat bubbles are small, contextual containers (composed using Tiles) that frame user prompts, AI responses, and insights provided by Copilot within the Copilot panel.
- They also frame user chats with agents and other Sage assistants within the Chatbot container.
- They enhance readability and create a conversational flow in messaging apps.
- In the Copilot panel, they serve to draw attention to important information, guide users through interactions, and offer helpful suggestions without being obtrusive.
Figma library (opens in new tab)
Anatomy
Bubble: User prompt
Bubble: Response (default)
Variations
The response bubble can have the following variations. The prompt bubble has no variations.
Status
All statuses are used in the Copilot panel pattern.
Default
AI insight
Error
Success
Optional elements
Optional elements may be combined
With timestamp
With portrait
With feedback buttons
Swappable blocks
- Each response bubble contains interchangeable block instances, allowing you to swap in any existing or custom component, including inputs, buttons, typography, and more.
- Additionally, you can use blocks that are tailored specifically for use within the Chatbot panel or the Copilot panel. This provides flexibility and customization based on the context of the interaction.
Block types
Actions horizontal
Actions vertical
Actions wrap
Contact card
Data legend
Data list
Data summary
Disclaimer
File
More information accordion
Multimedia
Skeleton
Table
Trust accordion
Copilot examples
Default bubble examples
Welcome
Table
Sources
Document
Report
Quote
AI insight bubble examples
Action
Table
Success and error examples
Invoice reminder sent
Cannot complete action
Limit reached
Server down
Color mode
Light
Dark
Requirements
Users should be able to:
- Understand that each bubble is a distinct message from a chat bot or chat agent.
- Understand the differences between message senders.
- Distinguish between unique message bubbles though clear labels.
- Receive updates when new messages arrive.
- Navigate to and from any interactive elements within bubbles using a keyboard or other assistive technology.
Interactions
- If a bubble contains interactive elements, those elements should remain interactive until they are no longer relevant.
- When no longer relevant, interactive elements should be replaced with static text.
- A bubble may become no longer relevant when:
- A bubble has been replaced with another, more relevant bubble.
- An interactive element has been interacted with, furthering the conversation between the user and the agent.
Keyboard interactions
- Tab or Shift+Tab. Moves focus to interactive elements within a bubble.
- Bubbles are non-interactive and should not receive focus themselves.
Design considerations
- When styling chat bubbles, use different visual indicators to distinguish the user from the agent.
- Consider the width of the chat window, so that screen magnifier users can still easily track messages between different senders.
- Text elements must have a minimum contrast ratio of 4.5:1 with the background of the chat bubble.
Development considerations
- For animations like loading or typing, make sure that prefers-reduced-motion media queries are applied, so user preferences are respected.
- New messages must be announced to screen reader users by using aria-liveregions.
- When the screen reader is idle, announce new messages using aria-live=”polite”.
- Bubble messages must have unique names, labelled by time stamps, so that screen reader users can distinguish between different elements.
- The senders of messages must be identified to screen reader users, so they can understand the information presented and the relationships between bubbles.
- Multiple bubble messages in succession should be given role=”group” to highlight their relationship.
- Include visually hidden text to help screen reader users distinguish between message senders if that information is not presented visually in text.
| Date | Changes |
|---|---|
| October 2025 | Split Anatomy example into two.Split Variations examples into Status and Options.Added light example to Color modes.Split Blocks into Block types and Examples.Added examples to Blocks - Examples. |
| August 2025 | Updated guidance on the accessibility tab. |
| March 2025 | Simplified the structure of the swappable blocks and of the blocks container to allow for a more seamless designing experienceUpdated the keyline border styling to match Carbon |
| November 2024 | Updated Block, and added Disclaimer.Added Examples tab with Copilot use cases. |
| October 2024 | Updated Anatomy image.Updated Variations image, added On surface. |
| September 2024 | New version created. Previous version archived in the AI hub design system. |