This bubble has multiple lines. It should wrap to the next line and you should see a different radius on the corners.
This bubble has multiple lines.
It should wrap to the next line and you should see a different radius on the corners.
Here is some more text to see how it wraps.
Variants
Default bubbles use the primary color for the active user side of a chat.
Secondary bubbles are the standard neutral surface for assistant and conversation content.
Muted bubbles lower the emphasis for quiet system notes or for displaying supporting content.
Tinted bubbles use a softer primary tint when primary fill is too strong.
Outline bubbles can be used to frame message content and give it a border.
Destructive bubbles flag errors or failed actions in a conversation.
Ghost bubbles work for assistant text and other content that should not be framed.
This is perfect for assistant messages that should not have a frame and can take the full width of the container.
Ghost bubbles are full width and can take the full width of the container.
Alignment
This bubble is aligned to the start.
This bubble is aligned to the end.
This multiline bubble is aligned to the start. The corners should adjust when the text wraps to show the grouped side of the conversation.
This multiline bubble is aligned to the end. It should sit on the opposite side with the matching corner radius for wrapped text.
Grouped
I finished the audit pass.
The registry output looks clean, but I found one stale route.
Want me to remove it now?
Yes, clean that up.
Then rerun the registry build.
Collapsible
The accessibility review found two focus states that were visually too subtle in dark mode.
I checked the dialog, menu, and drawer paths because each one renders focusable control...
Ghost bubbles work for assistant text and other content that should not be framed.
This is perfect for assistant messages that should not have a frame and can take the full width of the container.
Use this for content that needs the whole row.