Badge

Small status indicators. Use variant to control the visual style.

InputTypeDefaultDescription
variant'default' | 'secondary' | 'outline' | 'danger' | 'success''default'Visual style

Import & Usage

typescript
import { Component } from '@angular/core';
import { NgOatBadge } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatBadge],
  template: `
    <ng-oat-badge>Default</ng-oat-badge>
    <ng-oat-badge variant="success">Active</ng-oat-badge>
    <ng-oat-badge variant="danger">3</ng-oat-badge>
  `,
})
export class ExampleComponent {}

All Variants

DefaultSecondaryOutlineDangerSuccess
html
<ng-oat-badge>Default</ng-oat-badge>
<ng-oat-badge variant="secondary">Secondary</ng-oat-badge>
<ng-oat-badge variant="outline">Outline</ng-oat-badge>
<ng-oat-badge variant="danger">Danger</ng-oat-badge>
<ng-oat-badge variant="success">Success</ng-oat-badge>

Inline with Text

New messages 3

Build status Passing

Version v0.1.0

html
<p>New messages <ng-oat-badge variant="danger">3</ng-oat-badge></p>
<p>Build status <ng-oat-badge variant="success">Passing</ng-oat-badge></p>
<p>Version <ng-oat-badge variant="outline">v0.1.0</ng-oat-badge></p>