Chat

TwBubble

TwBubble is a Blazor chat message bubble with soft, filled and outlined variants, start and end alignment and a row of reaction chips.

Last updated 20 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

Put the message text in a TwBubble. By default it is a soft gray bubble with a tip near its bottom pointing at the sender.

Can you send me the latest figures?

RAZOR

<TwBubble>Can you send me the latest figures?</TwBubble>

Variants

Use Variant to choose a Soft, Filled or Outlined bubble. A filled bubble with no Color uses the primary color.

A soft bubble.

A filled bubble.

An outlined bubble.

RAZOR

<div class="flex flex-col gap-3">
    <TwBubble Variant="BubbleVariant.Soft">A soft bubble.</TwBubble>
    <TwBubble Variant="BubbleVariant.Filled">A filled bubble.</TwBubble>
    <TwBubble Variant="BubbleVariant.Outlined">An outlined bubble.</TwBubble>
</div>

Colors

Set Color to tint the bubble. Every variant has every color.

Soft Primary

Soft Accent

Soft Success

Soft Danger

Soft Warning

Soft Info

Soft Light

Soft Dark

Filled Primary

Filled Accent

Filled Success

Filled Danger

Filled Warning

Filled Info

Filled Light

Filled Dark

Outlined Primary

Outlined Accent

Outlined Success

Outlined Danger

Outlined Warning

Outlined Info

Outlined Light

Outlined Dark

RAZOR

<div class="grid gap-3 sm:grid-cols-3">
    @foreach (var variant in Enum.GetValues<BubbleVariant>())
    {
        <div class="flex flex-col gap-2">
            @foreach (var color in Enum.GetValues<Color>())
            {
                <TwBubble Variant="@variant" Color="@color">@variant @color</TwBubble>
            }
        </div>
    }
</div>

Alignment and tail

Inside a TwMessage the bubble follows the message's alignment, and its tip points at the avatar. On its own, set Align. Set Tail to false to leave the tip off, for example on every bubble but the last in a group.

Start aligned, with a tail.

Start aligned, without a tail.

End aligned, with a tail.

End aligned, without a tail.

RAZOR

<div class="flex flex-col gap-3">
    <TwBubble>Start aligned, with a tail.</TwBubble>
    <TwBubble Tail="false">Start aligned, without a tail.</TwBubble>
    <TwBubble Align="MessageAlign.End" Variant="BubbleVariant.Filled">End aligned, with a tail.</TwBubble>
    <TwBubble Align="MessageAlign.End" Variant="BubbleVariant.Filled" Tail="false">End aligned, without a tail.</TwBubble>
</div>

Reactions

Pass Reactions to show them under the bubble. Give each one a Label for screen readers. Set OnReactionClick to make them toggle buttons, and update the reaction's Reacted and Count in the callback.

The release is live. Thanks, everyone!

Read only reactions are shown as text.

RAZOR

<div class="flex flex-col gap-4">
    <TwBubble Reactions="@_reactions" OnReactionClick="ToggleReaction">The release is live. Thanks, everyone!</TwBubble>
    <TwBubble Reactions="@_readOnlyReactions" Color="Color.Success">Read only reactions are shown as text.</TwBubble>
</div>

CSHARP

@code {
    private readonly List<BubbleReaction> _reactions =
    [
        new() { Emoji = "🎉", Label = "Celebrate", Count = 4, Reacted = true },
        new() { Emoji = "❤️", Label = "Love", Count = 2 },
        new() { Emoji = "👀", Label = "Looking", Count = 1 }
    ];
    
    private readonly List<BubbleReaction> _readOnlyReactions =
    [
        new() { Emoji = "👍", Label = "Thumbs up", Count = 12 }
    ];
    
    private static void ToggleReaction(BubbleReaction reaction)
    {
        reaction.Reacted = !reaction.Reacted;
        reaction.Count += reaction.Reacted ? 1 : -1;
    }
}

Accessibility

The bubble's text is read as normal content. Its reactions are a group named "Reactions", and each one is announced by its label and count, for example "Celebrate: 4", so screen readers never read the emoji and the number without context. Clickable reactions are buttons with aria-pressed, so you hear whether you have chosen each one. Colors meet WCAG AA contrast in light and dark mode.

A bubble is not a Tab stop. Its reactions are a group named "Reactions". Clickable reactions are toggle buttons that say whether you chose them.

Key	What it does
`Tab` or `Shift` plus `Tab`	Moves between the clickable reactions.
`Enter` or `Space`	Adds or removes your reaction.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwBubbleTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Surface`	string
`Neutral`	string
`NeutralOutlined`	string
`Tip`	string
`StartTail`	string
`EndTail`	string
`Reactions`	string
`ReactionEmoji`	string
`ReactionCount`	string

Global Theme Configuration

These reuse shared design tokens configured once on TwBlazorTheme, rather than being unique to this component.

Property	Type	Controls
`Soft`	TwBlazorPalette
`Filled`	TwBlazorPalette
`Outlined`	TwBlazorPalette

Full reference: TwBubbleTheme on the API docs.

TwBubble

Basic usage

Variants

Colors

Alignment and tail

Reactions

Accessibility

Keyboard navigation

Theme configuration

Global Theme Configuration