Button for Angular

import { AuiButton, AuiLinkButton } from '@absoluteui/angular/button';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Button page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { button: { ... } } }) (see Configuration).

Example

import { Component, signal } from '@angular/core';
import { AuiButton } from '@absoluteui/angular/button';

@Component({
  selector: 'app-save-bar',
  imports: [AuiButton],
  template: `
    <button type="button" auiButton variant="secondary" (click)="cancel()">Cancel</button>
    <button type="button" auiButton variant="primary" [loading]="saving()" (click)="save()">Save changes</button>`,
})
export class SaveBarComponent {
  readonly saving = signal(false);
  cancel(): void {}
  save(): void {
    this.saving.set(true);
  }
}

button[auiButton]

Class AuiButton; template reference #ref="auiButton".

AbsoluteUI Button: <button auiButton variant="primary">Save</button>. Variants primary, secondary, outline, ghost, danger; sizes sm, md, lg; loading; icon + iconPosition or a projected icon component; fullWidth. Disabled is the native attribute. Enhances the native button in place (native type, form, and disabled keep working); its content, including projected icon components, stays Angular-managed.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
variant	ButtonVariant	'secondary'	Visual emphasis.
size	ButtonSize	'md'	Control height and font size.
loading	boolean	false	Busy state: aria-disabled, activation blocked, spinner shown, ‘Loading’ added to the accessible name.
icon	IconRef | null	null	Icon name or definition.
iconPosition	"start" | "end"	'start'	Icon placement (logical).
fullWidth	boolean	false	Stretch to the full inline size of the container.
label	string		Accessible name for icon-only buttons.
icons	Partial<ButtonIcons>		Icon slot overrides.

Two-way bindings

Model	Type	Change output	Description
[(pressed)]	boolean | null	(pressedChange)	Toggle button: bind [(pressed)]; unset is an ordinary button.

Test harness

AuiButtonHarness from @absoluteui/angular/testing. button[auiButton] and a[auiButton].

a[auiButton]

Class AuiLinkButton; template reference #ref="auiButton".

A link styled as a button: <a auiButton href="/help">Help</a> or, with the router, <a auiButton routerLink="/reports">Reports</a> (import RouterLink from @angular/router). The element stays a link: href, target, rel, download, modified clicks (new tab), routerLinkActive, query params, and fragments keep working natively. disabled sets aria-disabled, removes the link from the tab order, and blocks activation (including RouterLink navigation) while keeping the href; loading blocks activation too.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
variant	ButtonVariant	'secondary'	Visual emphasis.
size	ButtonSize	'md'	Control height and font size.
loading	boolean	false	Busy state: aria-disabled, activation blocked, spinner shown, ‘Loading’ added to the accessible name.
disabled	boolean		Links have no native disabled: aria-disabled, out of the tab order, activation blocked.
icon	IconRef | null	null	Icon name or definition.
iconPosition	"start" | "end"	'start'	Icon placement (logical).
fullWidth	boolean	false	Stretch to the full inline size of the container.
label	string		Accessible name for icon-only links.
icons	Partial<ButtonIcons>		Icon slot overrides.