# Bubble

A chat bubble: solid, subtle or outline.

Group: Chat

## Import

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

## Examples

### Basic usage

```tsx
function BubbleDemo() {
  const [open, setOpen] = useState(false)
  return (
    <Stack gap="4">
      <HStack gap="2" align="flex-end">
        <Bubble.Root align="start" variant="subtle">
          <Bubble.Content>subtle · start</Bubble.Content>
        </Bubble.Root>
        <Bubble.Root align="end" variant="subtle">
          <Bubble.Content>subtle · end</Bubble.Content>
        </Bubble.Root>
      </HStack>

      <HStack gap="2" align="flex-end">
        <Bubble.Root align="start" variant="solid">
          <Bubble.Content>solid · start</Bubble.Content>
        </Bubble.Root>
        <Bubble.Root align="end" variant="solid">
          <Bubble.Content>solid · end</Bubble.Content>
        </Bubble.Root>
      </HStack>

      <HStack gap="2" align="flex-end">
        <Bubble.Root align="start" variant="outline">
          <Bubble.Content>outline · start</Bubble.Content>
        </Bubble.Root>
        <Bubble.Root align="end" variant="outline">
          <Bubble.Content>outline · end</Bubble.Content>
        </Bubble.Root>
      </HStack>

      <Bubble.Root align="start">
        <Bubble.Content>Bisa gue bantu apa lagi?</Bubble.Content>
        <Bubble.Footer>
          <Bubble.Action aria-label="Like">👍</Bubble.Action>
          <Bubble.Action aria-label="Dislike">👎</Bubble.Action>
          <Bubble.Action aria-label="Copy">📋</Bubble.Action>
        </Bubble.Footer>
      </Bubble.Root>

      <Bubble.Root align="start">
        <Bubble.Content>
          Jawabannya adalah 42.
          <Bubble.Collapsible open={open} onOpenChange={setOpen} label="Show reasoning" mt="2">
            Menghitung dari pertanyaan tentang hidup, semesta, dan segalanya...
          </Bubble.Collapsible>
        </Bubble.Content>
      </Bubble.Root>
    </Stack>
  )
}
```

## Props

### Root

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `BubbleAlign` | `start` | `"end"` = your own message (usually right), `"start"` = the other side. |
| `variant` | `BubbleVariant` |  |  |
| `children` | `ReactNode` |  |  |

### Action

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `"aria-label"` * | `string` |  | Defines a string value that labels the current element. |

### Collapsible

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` * | `boolean` |  |  |
| `label` * | `ReactNode` |  |  |
| `onOpenChange` * | `(open: boolean) => void` |  |  |

`*` = required. Style props and HTML attributes are accepted too.