Component

Button

A button for actions and links. It applies to <button> or <a> hosts, carries text and icons, and comes in eight tones, six sizes, three shapes, plus loading and full-width states.

Types

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

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

@Component({
  selector: 'hb-demo-button-types',
  imports: [HbButtonComponent],
  template: `
    <div class="flex flex-wrap items-center gap-2">
      <button hb-button>Default</button>
      <button hb-button hbType="secondary">Secondary</button>
      <button hb-button hbType="outline">Outline</button>
      <button hb-button hbType="ghost">Ghost</button>
      <button hb-button hbType="success">Success</button>
      <button hb-button hbType="warning">Warning</button>
      <button hb-button hbType="destructive">Destructive</button>
      <button hb-button hbType="link">Link</button>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoButtonTypesComponent {}

Sizes

Icons & shapes

States, anchor & full width

Anchor button

API reference

hb-button, button[hb-button], a[hb-button]

PropertyDescriptionTypeDefault
[hbType] Tone and emphasis of the button. 'default' | 'destructive' | 'warning' | 'success' | 'outline' | 'secondary' | 'ghost' | 'link' 'default'
[hbSize] Height and padding; icon is a square icon-only button. 'xs' | 'sm' | 'default' | 'lg' | 'xl' | 'icon' 'default'
[hbShape] Corner style of the button. 'default' | 'circle' | 'square' 'default'
[hbFull] Stretch to the full width of the container. boolean false
[hbLoading] Show a spinner and block interaction. boolean false
[hbDisabled] Disable the button. boolean false
[class] Extra CSS classes. Projected content (text and icons) fills the button. string ''