Bubble

A speech bubble that shows users one message of a conversation.

A bubble holds one message of a conversation. Its variant and its alignment show users which side of the conversation wrote the message, and its reactions show how others responded to it.

The warehouse ships 12 cases on Monday.

Usage

bubble-default.tsx

import { Bubble, BubbleContent } from "@biem/ui/components/ui/bubble";

export function BubbleDefault() {
	return (
		<Bubble>
			<BubbleContent>The warehouse ships 12 cases on Monday.</BubbleContent>
		</Bubble>
	);
}

Examples

Secondary

The store receives the delivery on Tuesday.

Muted

The store has 4 cases left.

Outline

The store accepts deliveries from 6:00 to 8:00.

Ghost

The store sends damaged items back with the next delivery.

Destructive

The transfer failed. The warehouse has only 8 of the 12 cases in stock.

Start Alignment

The warehouse has shipped the 12 cases.

End Alignment

The store checked in all 12 cases.

Content as Link

View transfer 4821

Content as Button

Reactions on Top

The store checked in all 12 cases.

👍

Reactions on Bottom

The store checked in all 12 cases.

👍

Reactions at Start

The store checked in all 12 cases.

👍

Reactions at End

The store checked in all 12 cases.

👍

Group

The delivery has arrived at the store.

All 12 cases are checked in.

The shelf is filled again.

API Reference

Bubble

Prop	variant
Type	`"default" \| "secondary" \| "muted" \| "outline" \| "ghost" \| "destructive"`
Default	`"default"`
Description	Sets the background, the border and the text color of the content, and its hover color when the content renders a link or a button. Ghost removes the background, the padding and the rounded corners of the content and lifts the width limit of the bubble.

Prop	align
Type	`"start" \| "end"`
Default	`"start"`
Description	Places the bubble at the start or the end of the column it sits in, such as a BubbleGroup. With end, the content also moves to the end of the bubble.

BubbleContent

Prop	render
Type	`ReactElement \| render function`
Default	–
Description	Replaces the native element or composes the content with another component, such as a link or a button.

BubbleReactions

Prop	side
Type	`"top" \| "bottom"`
Default	`"bottom"`
Description	Sets the edge of the bubble that the reactions overlap.

Prop	align
Type	`"start" \| "end"`
Default	`"end"`
Description	Places the reactions near the left corner of the bubble with start and near the right corner with end.

BubbleGroup

BubbleGroup stacks the bubbles that belong together in a column. It renders a div and has no props of its own.

On this page