Skip to content Herbst UI beta

Component

Message

A composable chat message row. Align it to either side, add an avatar with status, and stack a header, bubble, attachments, footer, and hover actions inside the content column.

Avatar, header & footer

ASAna Silva · 10:32
Walked through the Black Forest this morning — the oaks are turning.
Delivered
import { ChangeDetectionStrategy, Component } from '@angular/core';

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

@Component({
  selector: 'hb-demo-message-basic',
  imports: [HbMessageImports],
  template: `
    <hb-message hbAlign="start" class="max-w-md">
      <hb-message-avatar hbName="Ana Silva" hbStatus="online" />
      <hb-message-content>
        <hb-message-header>Ana Silva · 10:32</hb-message-header>
        <div class="w-fit rounded-lg rounded-bl-sm bg-muted px-3 py-2 text-sm">
          Walked through the Black Forest this morning — the oaks are turning.
        </div>
        <hb-message-footer>Delivered</hb-message-footer>
      </hb-message-content>
    </hb-message>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoMessageBasicComponent {}

Aligned conversation

Ana Silva
Where did you take it?
Y
In the Black Forest, near Freiburg.
10:27

Attachments & actions

HBHerbst Bot · shared a file
Here is the photo from the Black Forest trip.
black-forest.pdf
Just now · unread

API reference

hb-message

PropertyDescriptionTypeDefault
[hbAlign] Which side the row hangs on. start is incoming; end mirrors it for outgoing. 'start' | 'end' 'start'
hb-message-group [hbAlign] Optional wrapper to stack several messages, with a default alignment for the run. 'start' | 'end' 'start'

hb-message-avatar

PropertyDescriptionTypeDefault
[hbSrc] / [hbName] Image URL, and a name used for the alt text and auto-generated initials fallback. string ''
[hbSize] / [hbShape] / [hbStatus] Avatar size (a preset or a number in px), shape, and a presence badge. size | number / 'circle' | 'square' / 'online' | 'offline' | 'away' | 'busy' 'sm' / 'circle' / —

Content parts

PropertyDescriptionTypeDefault
hb-message-content The column holding the bubble and its surrounding parts; aligns to the message side. component —
hb-message-header / hb-message-footer A caption above the bubble (name, time) and a line below (status, timestamp). component —
hb-message-attachments A slot for files, images, or link previews under the bubble. component —
hb-message-actions Trailing controls (copy, forward, react), typically shown on hover. component —