---
title: Bubble
description: "`Bubble`は、会話の内容をメッセージの吹き出しで表示するコンポーネントです。"
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/bubble/bubble.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/bubble
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-bubble--basic
---

# Bubble

`Bubble`は、会話の内容をメッセージの吹き出しで表示するコンポーネントです。

```tsx
<Bubble.Root endItemProps={{ variant: "solid" }}>
  <Bubble.Item>何者だ、お前は</Bubble.Item>

  <Bubble.Item direction="end">
    <Bubble.Content>趣味でヒーローをやっている者だ</Bubble.Content>
    <Bubble.Reactions aria-label="Reactions: thumbs up" role="img">
      👍
    </Bubble.Reactions>
  </Bubble.Item>

  <Bubble.Group>
    <Bubble.Item>…</Bubble.Item>
    <Bubble.Item>なんだ、その適当な設定は…</Bubble.Item>
  </Bubble.Group>
</Bubble.Root>
```

## 使い方

```tsx
import { Bubble } from "@yamada-ui/react"
```

```tsx
import { Bubble } from "@/components/ui"
```

```tsx
import { Bubble } from "@workspaces/ui"
```

```tsx
<Bubble.Root>
  <Bubble.Group>
    <Bubble.Item>
      <Bubble.Content />
      <Bubble.Reactions />
    </Bubble.Item>
  </Bubble.Group>
</Bubble.Root>
```

:::note
`Bubble.Content`は省略することができます。
:::

### itemsを使う

```tsx
const items = useMemo<Bubble.Item[]>(
  () => [
    { children: "何者だ、お前は" },
    {
      children: "趣味でヒーローをやっている者だ",
      direction: "end",
      reactions: "👍",
      reactionsProps: { "aria-label": "Reactions: thumbs up", role: "img" },
    },
    { items: [{ children: "…" }, { children: "なんだ、その適当な設定は…" }] },
  ],
  [],
)

return <Bubble.Root items={items} endItemProps={{ variant: "solid" }} />
```

### バリアントを変更する

```tsx
<VStack>
  <For each={["solid", "subtle", "surface", "outline", "panel", "ghost"]}>
    {(variant, index) => (
      <Bubble.Root key={index} variant={variant}>
        <Bubble.Item>ヒーローが逃げたら誰が戦うんだよ</Bubble.Item>
      </Bubble.Root>
    )}
  </For>
</VStack>
```

### サイズを変更する

```tsx
<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => (
      <Bubble.Root key={index} size={size} variant="solid" py="md">
        <Bubble.Item>
          <Bubble.Content>
            退屈な人生に刺激がほしくて他の星を襲うなんてOLでも考えねえぞ
          </Bubble.Content>
          <Bubble.Reactions
            aria-label="Reactions: thumbs up, fire, and 2 more"
            role="img"
          >
            <span>👍</span>
            <span>🔥</span>
            <span>+2</span>
          </Bubble.Reactions>
        </Bubble.Item>
      </Bubble.Root>
    )}
  </For>
</VStack>
```

### カラースキームを変更する

```tsx
<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <Bubble.Root key={index} colorScheme={colorScheme} variant="solid">
        <Bubble.Item>地球がヤバい!!!</Bubble.Item>
      </Bubble.Root>
    )}
  </For>
</VStack>
```

### グループ化する

グループ化する場合は、`Bubble.Group`を使用します。

```tsx
<Bubble.Root endItemProps={{ variant: "solid" }}>
  <Bubble.Item>ここに住んでもいいですか？</Bubble.Item>

  <Bubble.Group direction="end">
    <Bubble.Item>うん</Bubble.Item>
    <Bubble.Item>絶対ダメ</Bubble.Item>
  </Bubble.Group>

  <Bubble.Group>
    <Bubble.Item>ドサッ</Bubble.Item>
    <Bubble.Item>部屋代払います</Bubble.Item>
  </Bubble.Group>

  <Bubble.Item direction="end">ちゃんと歯ブラシ持ってきたか？</Bubble.Item>
</Bubble.Root>
```

### リアクションを表示する

リアクションを表示する場合は、`Bubble.Reactions`を使用します。配置を変更する場合は、`placement`を設定します。デフォルトは、`"end-end"`が設定されています。

```tsx
<VStack>
  <For
    each={[
      "start-start",
      "start-center",
      "start-end",
      "end-start",
      "end-center",
      "end-end",
    ]}
  >
    {(placement, index) => (
      <Bubble.Root key={index} variant="solid" py="md">
        <Bubble.Item>
          <Bubble.Content>
            ここで俺はお前に立ち向かわなくちゃいけないんだ！
          </Bubble.Content>
          <Bubble.Reactions
            aria-label="Reactions: thumbs up, fire, and 2 more"
            placement={placement}
            role="img"
          >
            <span>👍</span>
            <span>🔥</span>
            <span>+2</span>
          </Bubble.Reactions>
        </Bubble.Item>
      </Bubble.Root>
    )}
  </For>
</VStack>
```

## Props

### Bubble.Root

| Prop              | Default | Type                                                                                                                      | Description                                             |
| ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `as`              | -       | `As`                                                                                                                      | The HTML element to render.                             |
| `asChild`         | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child.              |
| `css`             | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                         |
| `colorScheme`     | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                             |
| `size`            | -       | `"lg" \| "md" \| "sm"`                                                                                                    | The size of the component.                              |
| `variant`         | -       | `"ghost" \| "outline" \| "panel" \| "solid" \| "subtle" \| "surface" ...`                                                 | The variant of the component.                           |
| `contentProps`    | -       | `Omit<BubbleContentProps, "children">`                                                                                    | The props for content component.                        |
| `endGroupProps`   | -       | `Omit<BubbleGroupProps, "children" \| "direction" \| "items">`                                                            | The theme props for group component in end direction.   |
| `endItemProps`    | -       | `Omit<BubbleItemProps, "children" \| "direction">`                                                                        | The theme props for item component in end direction.    |
| `groupProps`      | -       | `Omit<BubbleGroupProps, "children" \| "direction" \| "items">`                                                            | The props for group component.                          |
| `itemProps`       | -       | `Omit<BubbleItemProps, "children" \| "direction">`                                                                        | The props for item component.                           |
| `items`           | -       | `BubbleItem[]`                                                                                                            | If provided, generate elements based on items.          |
| `reactionsProps`  | -       | `Omit<BubbleReactionsProps, "children">`                                                                                  | The props for reactions component.                      |
| `startGroupProps` | -       | `Omit<BubbleGroupProps, "children" \| "direction" \| "items">`                                                            | The theme props for group component in start direction. |
| `startItemProps`  | -       | `Omit<BubbleItemProps, "children" \| "direction">`                                                                        | The theme props for item component in start direction.  |

### Bubble.Content

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Bubble.Group

| Prop          | Default   | Type                                                                                                                      | Description                                    |
| ------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| `as`          | -         | `As`                                                                                                                      | The HTML element to render.                    |
| `asChild`     | -         | `boolean`                                                                                                                 | Merges its props onto its immediate child.     |
| `css`         | -         | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                |
| `colorScheme` | -         | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                    |
| `size`        | `"md"`    | `"lg" \| "md" \| "sm"`                                                                                                    | The size of the component.                     |
| `variant`     | `"panel"` | `"ghost" \| "outline" \| "panel" \| "solid" \| "subtle" \| "surface" ...`                                                 | The variant of the component.                  |
| `direction`   | `"start"` | `SimpleDirection`                                                                                                         | The inline direction of the bubble.            |
| `items`       | -         | `BubbleItemWithContent[]`                                                                                                 | If provided, generate elements based on items. |

### Bubble.Item

| Prop           | Default   | Type                                                                                                                      | Description                                |
| -------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`           | -         | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`      | -         | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`          | -         | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme`  | -         | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `size`         | `"md"`    | `"lg" \| "md" \| "sm"`                                                                                                    | The size of the component.                 |
| `variant`      | `"panel"` | `"ghost" \| "outline" \| "panel" \| "solid" \| "subtle" \| "surface" ...`                                                 | The variant of the component.              |
| `contentProps` | -         | `Omit<BubbleContentProps, "children">`                                                                                    | The props for content component.           |
| `direction`    | `"start"` | `SimpleDirection`                                                                                                         | The inline direction of the bubble.        |

### Bubble.Reactions

| Prop          | Default     | Type                                                                                                                      | Description                                |
| ------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -           | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -           | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -           | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -           | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `placement`   | `"end-end"` | `Exclude<Direction, "end" \| "start" \| `center-${string}`>`                                                              | The placement of the reactions.            |

## アクセシビリティ

操作を伴わない絵文字のリアクションを表示する場合は、`Bubble.Reactions`に`role="img"`とリアクションの内容を説明する`aria-label`を設定します。

```tsx
<Bubble.Root>
  <Bubble.Item>
    <Bubble.Content>
      ここで俺はお前に立ち向かわなくちゃいけないんだ！
    </Bubble.Content>
    <Bubble.Reactions
      aria-label="Reactions: thumbs up, fire, and 2 more"
      role="img"
    >
      <span>👍</span>
      <span>🔥</span>
      <span>+2</span>
    </Bubble.Reactions>
  </Bubble.Item>
</Bubble.Root>
```

## 類似のコンポーネント

- [DataList](https://yamada-ui.com/docs/components/data-list.md): `DataList`は、データ項目のリストを表示するために使用されます。
- [List](https://yamada-ui.com/docs/components/list.md): `List`は、リストを表示するコンポーネントです。デフォルトでは、`ul`要素をレンダリングします。
- [Timeline](https://yamada-ui.com/docs/components/timeline.md): `Timeline`は、イベントのリストを時系列に表示するために使用されるコンポーネントです。
- [Tree](https://yamada-ui.com/docs/components/tree.md): `Tree`は、階層データを展開可能なツリー形式で表示するコンポーネントです。
- [NativeTable](https://yamada-ui.com/docs/components/native-table.md): `NativeTable`は、データを効率的に整理して表示するコンポーネントです。
- [Stat](https://yamada-ui.com/docs/components/stat.md): `Stat`は、数値やデータをボックス内に表示するために使用されます。
- [Table](https://yamada-ui.com/docs/components/table.md): `Table`は、列のソートや行の選択やクリックイベント機能を備えたテーブルのコンポーネントです。
- [AreaChart](https://yamada-ui.com/docs/components/area-chart.md): `AreaChart`は、複数のデータを比較するためのエリアチャートを描画するコンポーネントです。