Badge

Name: ng-oat
Author: SashiKumar Yadav

Small status indicators. Use variant for visual style and size for scale.

Input	Type	Default	Description
`variant`	`'default' \| 'secondary' \| 'outline' \| 'danger' \| 'success'`	`'default'`	Visual style
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Badge scale

Import & Usage

typescript

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

@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>
    <ng-oat-badge size="lg">Featured</ng-oat-badge>
  `,
})
export class ExampleComponent {}

Sizes

Small

Default

Large

html

<ng-oat-badge size="sm">Small</ng-oat-badge>
<ng-oat-badge>Default</ng-oat-badge>
<ng-oat-badge size="lg">Large</ng-oat-badge>

All Variants

Default

Secondary

Outline

Danger

Success

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>