ChatBubble

A pixel-art styled chat bubble component for building conversation interfaces.

?

Name	Category	Description	Type	Default
placement	? Style	Bubble placement direction	'start' | 'end'	'start'
type	? Style	Color type	'primary' | 'success' | 'info' | 'warning' | 'danger'	—
color	? Color	Custom hex color	string	—
typing	? State	Show typing indicator (replaces message content)	boolean	false
name	? Content	Sender name	string	—
time	? Content	Timestamp	string	—
status	? Content	Footer status text	string	—
default	? Slot	Bubble message content		—
avatar	? Slot	Avatar area		—
header	? Slot	Custom header (overrides name/time)		—
footer	? Slot	Custom footer (overrides status)		—

Basic Usage

Use placement to control which side the bubble appears on. Default is start (left).

<template>
  <div class="demo-chat">
    <px-chat-bubble name="Alice" time="12:30">
      Hey! How's it going?
    </px-chat-bubble>
    <px-chat-bubble placement="end" name="Bob" time="12:31">
      Pretty good, thanks! Working on a pixel art project.
    </px-chat-bubble>
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Types

Use type property to set the bubble color theme.

<template>
  <div class="demo-chat">
    <px-chat-bubble type="primary">Primary message</px-chat-bubble>
    <px-chat-bubble type="success">Success message</px-chat-bubble>
    <px-chat-bubble type="info">Info message</px-chat-bubble>
    <px-chat-bubble type="warning">Warning message</px-chat-bubble>
    <px-chat-bubble type="danger">Danger message</px-chat-bubble>
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Avatar

Use the avatar slot to add an avatar next to the bubble.

<template>
  <div class="demo-chat">
    <px-chat-bubble name="Alice" time="12:30">
      <template #avatar>
        <px-avatar size="small">A</px-avatar>
      </template>
      Hey! Check out this pixel art.
    </px-chat-bubble>
    <px-chat-bubble placement="end" name="Bob" time="12:31">
      <template #avatar>
        <px-avatar size="small">B</px-avatar>
      </template>
      Looks awesome!
    </px-chat-bubble>
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Header & Footer

Use name, time, and status props to display sender info and delivery status.

<template>
  <div class="demo-chat">
    <px-chat-bubble name="Alice" time="12:30" status="Delivered">
      I'll send you the files tonight.
    </px-chat-bubble>
    <px-chat-bubble placement="end" name="Bob" time="12:31" status="Seen">
      Great, no rush!
    </px-chat-bubble>
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Custom Color

Use color property to set a custom hex color for the bubble.

<template>
  <div class="demo-chat">
    <px-chat-bubble color="#8b5cf6" name="Violet">
      Custom purple bubble!
    </px-chat-bubble>
    <px-chat-bubble placement="end" color="#f59e0b" name="Amber">
      Custom amber bubble!
    </px-chat-bubble>
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Typing Indicator

Use the typing prop to show an animated typing indicator with bouncing pixel dots.

<template>
  <div class="demo-chat">
    <px-chat-bubble name="Alice" time="12:30">
      Hey! How's it going?
    </px-chat-bubble>
    <px-chat-bubble placement="end" name="Bob" :typing="true" />
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Conversation

Combine multiple chat bubbles to build a full conversation layout.

<template>
  <div class="demo-chat">
    <px-chat-bubble name="Alice" time="14:00">
      <template #avatar>
        <px-avatar size="small">A</px-avatar>
      </template>
      Have you tried the new pixel component library?
    </px-chat-bubble>
    <px-chat-bubble placement="end" type="primary" name="Bob" time="14:01">
      <template #avatar>
        <px-avatar size="small">B</px-avatar>
      </template>
      Yes! Sakana Element is great for retro-themed UIs.
    </px-chat-bubble>
    <px-chat-bubble name="Alice" time="14:02" status="Delivered">
      <template #avatar>
        <px-avatar size="small">A</px-avatar>
      </template>
      I love the pixel borders and drop shadows.
    </px-chat-bubble>
    <px-chat-bubble placement="end" type="success" name="Bob" time="14:03" status="Seen">
      <template #avatar>
        <px-avatar size="small">B</px-avatar>
      </template>
      The ChatBubble component even has a stepped pixel tail!
    </px-chat-bubble>
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>