Component

Marker

A small labelled marker for list rows, captions, and section dividers. Pair an icon with content, render it as a link or button, draw it as a border or centred separator, and show loading or shimmer states.

Icon, content & interactive

Oak leaves

View photo

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

import { HbMarkerImports } from '@herbst/ui';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { phosphorArrowRight, phosphorLeaf } from '@ng-icons/phosphor-icons/regular';

@Component({
  selector: 'hb-demo-marker-basic',
  imports: [HbMarkerImports, NgIcon],
  viewProviders: [provideIcons({ phosphorLeaf, phosphorArrowRight })],
  template: `
    <div class="flex flex-col items-start gap-3">
      <hb-marker>
        <hb-marker-icon><ng-icon name="phosphorLeaf" /></hb-marker-icon>
        <hb-marker-content>Oak leaves</hb-marker-content>
      </hb-marker>

      <a hb-marker href="#" (click)="$event.preventDefault()">
        <hb-marker-icon><ng-icon name="phosphorArrowRight" /></hb-marker-icon>
        View photo
      </a>

      <button hb-marker type="button">
        <hb-marker-icon><ng-icon name="phosphorLeaf" /></hb-marker-icon>
        Add to album
      </button>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoMarkerBasicComponent {}

Border & separator

Black Forest

Chapter II

Field notes

Loading & shimmer

Uploading photos…

Syncing Herbst

API reference

hb-marker

Property	Description	Type	Default
selector	Use as hb-marker, or on an a / button element to make it an interactive link or control.	hb-marker \| a[hb-marker] \| button[hb-marker]	—
[hbVariant]	default is inline; border adds a bottom rule; separator centres the content between two lines.	'default' \| 'border' \| 'separator'	'default'
[hbLoading] / [hbLoadingLabel]	Swap the icon for a spinner and set role=status; the label is announced to assistive tech.	boolean / string	false / 'Loading'
[hbShimmer]	Apply an animated shimmer to the content text.	boolean	false
[hbRole]	Set an explicit ARIA role (ignored while loading, which forces role=status).	string \| null	null

Slots

Property	Description	Type	Default
hb-marker-icon / [hb-marker-icon]	The leading icon slot; hidden while loading.	component	—
hb-marker-content / [hb-marker-content]	The label slot. Plain projected text also works without it.	component	—