Bubble

チャットのメッセージを吹き出しで表示するコンポーネント。variant で送信者ごとの色分け、align で左右の配置を切り替え、BubbleReactions で絵文字リアクションを重ねられる。ジョブアンテナでは企業と求職者のメッセージ画面で、応募お礼や面接日程調整のやり取りに使う。

基本

相手のメッセージを muted で左に、自分のメッセージを default で右に並べる基本形。ghost はシステムメッセージ、tinted は強調したい返信に使う。

応募お礼から面接日程の確定までの流れ。送信者名と時刻を添え、連続するメッセージは BubbleGroup でまとめる。

BubbleReactions を side / align で四隅に配置する。既読や共感を絵文字で軽く返すときに使う。

render prop で吹き出し全体をボタンにし、メッセージ内で求人を共有する。タップで求人詳細へ誘導する場面で使う。