Bubble
It shows the appearance of speaking; AI conversational interactions seem to like using it a lot.
Basic Usage
By default a Bubble is a theme-tinted bubble with its tail at the bottom-left, ready for the left side of a conversation. Set variant to 'primary' and tailPlacement to 'bottom-right' to get a solid, filled bubble on the right.
Colors
variant controls the style of Bubble: 'plain' (default) fills it with a tint of the theme color, and 'primary' fills it with the theme color itself.
theme sets the theme color and accepts 'primary' (default), 'sakura', 'success', 'warning', 'danger', 'info', and 'notice', where 'info' is the neutral grey. A custom color can be passed through color, which overrides theme.
Tail
Use tailPlacement to put the tail at any of the four corners of the bubble. Set tail: false to remove the tail; tailWidth and tailHeight control the base width and the height of the tail (px).
Border Radius
shape offers two presets: 'rect' (default, square corners) and 'round' (fully rounded).
borderRadius controls the size of the four rounded corners. It accepts a single value or an array in [top-left, top-right, bottom-right, bottom-left] order — the same as the other components — and also supports percentages.
The corner the tail hangs from is always square.
API
BubbleProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| variant | 'plain' | 'primary' | True | 'plain' | The style variant of Bubble. | 0.2.1 |
| theme | 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info' | 'notice' | True | 'primary' | The theme color of Bubble. | 0.2.1 |
| color | string | True | | A custom color, overrides theme. | 0.2.1 |
| tail | boolean | True | true | Whether to draw the tail. | 0.2.1 |
| tailPlacement | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | True | 'bottom-left' | The corner the tail hangs from. | 0.2.1 |
| tailWidth | number | True | 2 | The base width of the tail. | 0.2.1 |
| tailHeight | number | True | 2 | The height of the tail. | 0.2.1 |
| borderRadius | NumberOrPercentage | NumberOrPercentage[] | True | | Corner radius, takes precedence over shape and behaves like CSS border-radius. A single value or an array of length 1 → applies to all four corners simultaneously; an array of length 2 → [top-left & bottom-right, top-right & bottom-left]; an array of length 3 → [top-left, top-right & bottom-left, bottom-right]; an array of length 4 → applies to the four corners in a clockwise order. | 0.2.1 |
| shape | 'rect' | 'round' | True | 'rect' | The corner preset, lower priority than borderRadius. | 0.2.1 |
| pollSizeChange | boolean | True | false | Whether to redraw when the container size changes. | 0.2.1 |
BubbleSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | The content of Bubble. | 0.2.1 |
NumberOrPercentage
export type NumberOrPercentage = number | `${number}%`