Bubble
A chat message, from the user or an assistant, with room for an avatar, a header and a footer.
Anotomy
Structure of a bubble and how its parts are composed. These are the bubble's semantic parts, so they are also what the
classNames and styles objects accept.
| Name | Description | |
|---|---|---|
1 | root | The whole message row. placement puts it on the start or end side, and the avatar follows. |
2 | avatar | The slot beside the message, filled by avatar. It renders only when avatar is set. |
3 | body | The column that holds the header, the content and the footer, next to the avatar. |
4 | header | The line above the message, from header, for a name or a time. It renders only when header is set. |
5 | content | The message itself, from content. variant and shape style this part, and loading replaces what is inside it. |
6 | footer | The row under the message, from footer, usually a set of actions. It renders only when footer is set. |
7 | extra | The slot at the trailing edge of the message, from extra, for one small action. It renders only when extra is set. |
© 2026 AntUIKit . All rights reserved.