Bubble

대화형 UI용 채팅 스타일 메시지 버블.

Bubble은 채팅·대화 레이아웃용 메시지 표면을 렌더링합니다. BubbleContent, 선택적 BubbleReactions, 스택 메시지용 BubbleGroup과 함께 사용하세요.

Want to catch up later?

On my way.

See you there.

Sounds good.

계약

Overview

Machine-readable contract from Component Spec.

component: bubbleexport: Bubbleversion: 1attributes: data-refineui=bubble

Anatomy

Part	data-refineui
root	bubble
content	bubble-content
group	bubble-group
reactions	bubble-reactions
surface	bubble-surface

Variants

Axis	Values
variant	default, secondary, muted, tinted, outline, ghost, destructive

Layout

Property	Value
direction	logical
rtl	true

설치

npm install @refineui/react @refineui/tokens

사용법

import { Bubble, BubbleContent, BubbleGroup } from "@refineui/react";

<Bubble variant="muted" align="start">
  <BubbleContent>Want to catch up later?</BubbleContent>
</Bubble>

<Bubble variant="default" align="end">
  <BubbleContent>Sounds good.</BubbleContent>
</Bubble>

API 레퍼런스

Bubble

Prop	Default	Type	Description
variant	—	"default" \| "secondary" \| "muted" \| "tinted" \| "outline" \| "ghost" \| "destructive"	시각 스타일.
align	—	"start" \| "end"	메시지 정렬.

BubbleContent / BubbleReactions / BubbleGroup

본문 텍스트, 리액션, 스택 그룹용 조합 슬롯입니다. 구조는 프리뷰를 참고하세요.