Skip to content

Pro Component — This component requires an Aura UI Pro license.

Basic Usage

Alice
Alice
Hey, how's the project going?
10:32 AM
You
You
Almost done! Just finishing up the last feature.
10:33 AM 
<div class="space-y-4">
    <x-aura::chat-bubble position="left" name="Alice" time="10:32 AM">
        Hey, how's the project going?
    </x-aura::chat-bubble>
    <x-aura::chat-bubble position="right" name="You" time="10:33 AM">
        Almost done! Just finishing up the last feature.
    </x-aura::chat-bubble>
</div>

Props

Prop Type Default Description
position string 'left' Bubble alignment: left or right.
color string 'default' Bubble color theme: default, primary, success.
avatar string|null null URL to an avatar image displayed beside the bubble.
name string|null null Sender name shown above the message.
time string|null null Timestamp displayed below the message.
status string|null null Delivery status indicator: sent, delivered, read.

Examples

Conversation with Avatars and Status

Sarah
Sarah
Have you seen the new design mockups?
2:15 PM
You
You
Yes! They look great. I especially like the dashboard layout.
2:16 PM
Sarah
Sarah
Awesome, I'll let the team know we're good to proceed.
2:17 PM
You
You
Sounds good!
2:18 PM 
<div class="space-y-4 max-w-lg">
    <x-aura::chat-bubble
        position="left"
        name="Sarah"
        avatar="/avatars/sarah.jpg"
        time="2:15 PM"
    >
        Have you seen the new design mockups?
    </x-aura::chat-bubble>

    <x-aura::chat-bubble
        position="right"
        name="You"
        avatar="/avatars/you.jpg"
        time="2:16 PM"
        status="read"
        color="primary"
    >
        Yes! They look great. I especially like the dashboard layout.
    </x-aura::chat-bubble>
</div>

Color Variants

Default
This is the default color bubble.
Primary
This is the primary color bubble.
Success
This is the success color bubble. 
<div class="space-y-4 max-w-md">
    <x-aura::chat-bubble position="left" color="default" name="Default">
        This is the default color bubble.
    </x-aura::chat-bubble>
    <x-aura::chat-bubble position="right" color="primary" name="Primary">
        This is the primary color bubble.
    </x-aura::chat-bubble>
    <x-aura::chat-bubble position="left" color="success" name="Success">
        This is the success color bubble.
    </x-aura::chat-bubble>
</div>

Accessibility

  • Each bubble uses role="listitem" within a parent conversation container using role="list".
  • The sender name is rendered as a visible label associated with the message via aria-labelledby.
  • Delivery status icons include aria-label text (e.g., "Sent", "Delivered", "Read") for screen readers.
  • Timestamps use <time> elements with a datetime attribute for machine-readable values.