Badge for Angular

import { AuiBadge } from '@absoluteui/angular/badge';

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

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

Example

import { Component } from '@angular/core';
import { AuiBadge } from '@absoluteui/angular/badge';

@Component({
  selector: 'app-invoice-status',
  imports: [AuiBadge],
  template: `<aui-badge [label]="overdue ? 'Overdue' : 'Paid'" [tone]="overdue ? 'error' : 'success'" [dot]="true"></aui-badge>`,
})
export class InvoiceStatusComponent {
  overdue = true;
}

<aui-badge>

Class AuiBadge; template reference #ref="auiBadge".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Visible text; carries the meaning.
tone	BadgeTone	'neutral'	Decorative tone color.
variant	BadgeVariant	'subtle'	subtle: tone fill; outline: tone boundary.
size	BadgeSize	'md'	Badge size.
icon	IconRef | null		Decorative icon before the label.
dot	boolean	false	Decorative status dot before the label (not with icon).