Button

Open in the demo →

button[hx-button] and a[hx-button]: a native element styled as a Helix button. The label is the content; an icon is an inline <svg> (or an element with the class hx-button-icon) next to it.

<button hx-button (click)="save()">Save</button>
<button hx-button severity="success" variant="outlined" size="large">Publish</button>
<button hx-button [loading]="saving()" (click)="save()">Save</button>
<button hx-button iconOnly rounded aria-label="Add"><svg viewBox="0 0 24 24" …/></button>
<a hx-button variant="link" href="/docs">Docs</a>

Input	Type	Default	Description
variant	'filled' | 'outlined' | 'text' | 'link'	'filled'	How loud the button is.
severity	'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'help' | 'danger' | 'contrast'	'primary'	What it means; every severity works with every variant.
size	'small' | 'medium' | 'large'	'medium'	Font size and padding from the --h-button-sm-* / -lg-* tokens.
rounded	boolean	false	A pill; a circle for an icon-only button.
raised	boolean	false	Adds the elevation shadow.
fluid	boolean	false	Takes the full width of its container.
iconOnly	boolean	false	Square button for one icon. Give it aria-label.
loading	boolean	false	Spinner in front of the label, aria-busy="true", clicks are ignored; the button stays focusable.

Behaviour:

• A disabled button is the native disabled attribute; an anchor is disabled with aria-disabled="true", which the directive honours by ignoring clicks.
• While loading the button is not disabled: focus is not lost when an operation starts, and screen readers hear the busy state.
• Colours, radius, padding and the focus ring come from the --h-button-* tokens of the preset, in light and dark; override a token in your own preset, not the CSS.

Tokens

The look comes from the design tokens --h-button-* (see Theming); override them in your theme, never the component CSS.

Part of @gravionlabs/helix-ui; all components are listed in the component reference.