Component · Messaging
Message bubble
a chat message with a sender axis and an optional author/time meta line; body projects in.
Anatomy
How can I help you design today?
1 host · .lucent-message-bubble carries sender + group
2 .lucent-message-bubble__meta · author + timestamp
3 .lucent-message-bubble__body · the projected message
Variants
How can I help you design today?
Draft a pricing page.
Playground
How can I help you design today?
sender
group
Where available
✓ React
✓ Angular
✓ Web Components
✓ Blazor
✓ Tokens
Using it
the same component, named idiomatically per target. one CSS contract underneath, so they render identically.
| Target | Reference | Package |
|---|
| React | <MessageBubble> | @design-foundry/lucent-react |
| Angular | <lucent-message-bubble> | @design-foundry/lucent |
| Web Components | <lucent-message-bubble> | @design-foundry/lucent-wc |
| Blazor | <LucentMessageBubble> | DesignFoundry.Lucent |
API
| Prop | Type | Default | Description |
|---|
| sender | user | assistant | system | other | assistant | sender role (attribute is sender, not role). |
| group | standalone | continuation | standalone | tightens spacing for consecutive messages. |
| author | string | — | meta line name. |
| timestamp | string | — | meta line time. |
| (children) | slotted | — | the message body (rich content). |