Component

Bubble

A chat message bubble. It carries text in one of several tones, aligns to either side, and can hold reactions, actions, and a menu. Group bubbles under a sender with hb-bubble-group.

Variants

Default — the primary bubble.

Secondary — the neutral default.

Muted — a quiet aside.

Tinted — a faint oxide wash.

Outline — hairline only.

Ghost — no surface at all.

Destructive — something went wrong.

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbBubbleImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-bubble-variants',
  imports: [HbBubbleImports],
  template: `
    <div class="flex flex-col items-start gap-2">
      <hb-bubble hbVariant="default">Default — the primary bubble.</hb-bubble>
      <hb-bubble hbVariant="secondary">Secondary — the neutral default.</hb-bubble>
      <hb-bubble hbVariant="muted">Muted — a quiet aside.</hb-bubble>
      <hb-bubble hbVariant="tinted">Tinted — a faint oxide wash.</hb-bubble>
      <hb-bubble hbVariant="outline">Outline — hairline only.</hb-bubble>
      <hb-bubble hbVariant="ghost">Ghost — no surface at all.</hb-bubble>
      <hb-bubble hbVariant="destructive">Destructive — something went wrong.</hb-bubble>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoBubbleVariantsComponent {}

Conversation & group

Kauan10:24

Walked through the Black Forest this morning.

The oaks are finally turning.

You10:26

Nice — did you take photos?

Reactions, actions & menu

New autumn photos ready for review.

No reaction yet.

Collapsible & tooltip

Walked through the Black Forest as the oaks and beeches turned. Leaves drifting down in amber and rust, a cool wind off the hills, the smell of damp earth and woodsmoke from the village below. Stopped for tea and watched the mist settle over the valley.

API reference

hb-bubble

Property	Description	Type	Default
[hbVariant]	Tone and surface of the bubble.	'default' \| 'secondary' \| 'muted' \| 'tinted' \| 'outline' \| 'ghost' \| 'destructive'	'secondary'
[hbAlign]	Which side the bubble tail sits on.	'start' \| 'end'	'start'
[hbCollapsible]	Clamp long text with a show more / less toggle.	boolean	false
[hbClampLines]	Number of lines shown before clamping.	number	4
[(hbExpanded)]	Two-way state of the collapsible bubble.	boolean	false
[hbTooltip]	Tooltip shown on hover (e.g. a timestamp).	string	''

hb-bubble-group

Property	Description	Type	Default
[hbName]	Sender name shown above the bubbles.	string	''
[hbAvatar]	Avatar image URL for the sender.	string	''
[hbTime]	Timestamp shown in the group header.	string	''
[hbAlign]	Side the whole group aligns to.	'start' \| 'end'	'start'

hb-bubble-reactions

Property	Description	Type	Default
[hbReactions]	Reaction chips: emoji, optional count, and reacted state.	HbBubbleReaction[]	[]
[hbAddable]	Show a button to add a new reaction.	boolean	false
(hbReact)	Emits the emoji of a toggled reaction.	string	—
(hbAdd)	Emitted when the add-reaction button is pressed.	void	—

hb-bubble-actions / hb-bubble-menu

Property	Description	Type	Default
hb-bubble-actions	Row of action controls projected below the bubble body.	slot	—
hb-bubble-menu	Overflow menu of extra actions; hbAriaLabel names its trigger.	slot	—