Examples
Alternate Placement between Start and End to build a thread.
Did you see the new signup numbers?
Up 22% since the pricing change.
The Pro plan is doing most of the work.
Review at six?
website/Examples/DataDisplay/ChatBubbleConversationExample.razor
Source
Color maps to chat-bubble-* so bubbles follow the theme.
Primary
Secondary
Accent
Neutral
Info
Success
Warning
Error
website/Examples/DataDisplay/ChatBubbleColorsExample.razor
Source
Image takes any fragment; Header and Footer are plain text.
Ana · 18:02
The hotfix is on staging, you can test it.
Tom · 18:04
On it. Five minutes.
website/Examples/DataDisplay/ChatBubbleDetailsExample.razor
Source
Playground
Tom · 18:04
Staging is green, deploying at nine.
Placement
ChatPlacement
Color
Color
<ChatBubble
Color="Color.Primary"
Header="Tom · 18:04"
Footer="Seen">
Staging is green, deploying at nine.
</ChatBubble>API
<ChatBubble>
DaisyBlazorParameters
- Color Color= Color.Default
Semantic color applied to the bubble via .chat-bubble-{token}.
- Footer string= null
Optional text rendered in the .chat-footer slot (e.g. "Delivered", "Seen").
- Header string= null
Optional text rendered in the .chat-header slot (e.g. sender name + timestamp).
- Placement ChatPlacement= ChatPlacement.Start
Whether the bubble appears on the left (Start) or right (End) side.
- Class string= null
Extra CSS classes added to the outer chat element.
- Style string= null
Inline styles applied to the outer chat element.
Content
- ChildContent RenderFragment
The message content rendered inside the .chat-bubble.
- Image RenderFragment
Optional avatar content rendered in the .chat-image slot.