---
title: Bubble
description: "`Bubble` is a component that displays conversational content in a message 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` is a component that displays conversational content in a message 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>
```

## Usage

```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` can be omitted.
:::

### Use items

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

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

### Change Variant

```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>
```

### Change Size

```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>
```

### Change Color Scheme

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

### Grouping

To group, use `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>
```

### Display Reactions

To display reactions, use `Bubble.Reactions`. To change the display position, set `placement`. The default is `"end-end"` is set.

```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.            |

## Accessibility

When displaying non-interactive emoji reactions, set `role="img"` and `aria-label` on `Bubble.Reactions` to describe the reactions.

```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>
```

## Similar Components

- [DataList](https://yamada-ui.com/docs/components/data-list.md): `DataList` is used to display a list of data items.
- [List](https://yamada-ui.com/docs/components/list.md): `List` is a component for displaying lists. By default, it renders a `ul` element.
- [Timeline](https://yamada-ui.com/docs/components/timeline.md): `Timeline` is a component that is used to display a list of events in chronological order.
- [Tree](https://yamada-ui.com/docs/components/tree.md): `Tree` is a component used to display hierarchical data structures in an expandable tree format.
- [NativeTable](https://yamada-ui.com/docs/components/native-table.md): `NativeTable` is a component for efficiently organizing and displaying data.
- [Stat](https://yamada-ui.com/docs/components/stat.md): `Stat` is used to display numbers or data within a box.
- [Table](https://yamada-ui.com/docs/components/table.md): `Table` is a table component equipped with column sorting, row selection, and click event features.
- [AreaChart](https://yamada-ui.com/docs/components/area-chart.md): `AreaChart` is a component for drawing area charts to compare multiple sets of data.