TypingIndicator

インポート

import { TypingIndicator } from '@caroainc/ui-components'

個別サブパス（バンドルサイズを抑えたい場合）:

import { TypingIndicator } from '@caroainc/ui-components/typing-indicator'

基本的な使い方

<TypingIndicator />

チャットUIでの使用例

<div className="flex items-end gap-2">
  <Avatar>
    <AvatarFallback>AI</AvatarFallback>
  </Avatar>
  <div className="bg-muted rounded-lg p-3">
    <TypingIndicator />
  </div>
</div>

メッセージリスト内での使用

こんにちは！

<div className="space-y-4">
  {/* ユーザーメッセージ */}
  <div className="flex justify-end">
    <div className="bg-primary text-primary-foreground rounded-lg p-3">
      こんにちは！
    </div>
  </div>
 
  {/* AIが入力中 */}
  <div className="flex items-end gap-2">
    <Avatar>
      <AvatarFallback>AI</AvatarFallback>
    </Avatar>
    <div className="bg-muted rounded-lg p-3">
      <TypingIndicator />
    </div>
  </div>
</div>

アクセシビリティ

role="status" と aria-label（デフォルト '入力中'）を持ち、スクリーンリーダー向けに sr-only テキストも出力します。label propで文言を上書きできます。

<TypingIndicator label="AIが回答を生成しています" />

Props

Prop	Type	Default	Description
`label`	`string`	`'入力中'`	アクセシビリティ用のラベル（role="status"のaria-labelとsr-onlyテキストに使用）
`className`	`string`	`-`	追加のCSSクラス
`...props`	`HTMLMotionProps<"div">`	`-`	framer-motionのmotion.divに渡す追加props（onAnimationComplete等）

TypingIndicator

インポート

基本的な使い方

チャットUIでの使用例

メッセージリスト内での使用

アクセシビリティ

Props

On this page