Bubble

The speech bubble used inside a message.

BubbleProps packages/core/src/chat-controls.ts:66 ↗

Import

import { Bubble } from "@tarve/core";

Usage

Bubble.tsx

import { Bubble, Column, Text } from "@tarve/core";

<Column gap={8}>
  <Bubble side="incoming">
    <Text>Is the release ready?</Text>
  </Bubble>
  <Bubble side="outgoing" variant="secondary">
    <Text>Shipping it now.</Text>
  </Bubble>
</Column>

Props

Prop	Type	Default
`maxWidth`	number \| `${number}%`	`"80%"`
`side`	`BubbleSide`	`"incoming"`
`variant`	`BubbleVariant`	`"default"`

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

BubbleSide

type BubbleSide = "incoming" | "outgoing";

BubbleVariant

type BubbleVariant = "default" | "secondary" | "destructive";