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
API reference
hb-button, button[hb-button], a[hb-button]
| Property | Description | Type | Default |
|---|---|---|---|
| [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 | '' |