Ivorie

Badge

A small inline pill for status, counts, tags and labels.

import { … } from '@inlaylab/ivorie/badge'
New
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvBadge } from '@inlaylab/ivorie/badge';

@Component({
  selector: 'demo-badge',
  imports: [IvBadge],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-badge>New</iv-badge>
  `,
})
export default class BadgeDemo {}

Installation

CLInpm
npx ivorie add badge

Use it for status, counts, tags, or inline warnings.

Usage

import { IvBadge } from '@inlaylab/ivorie/badge';
<iv-badge>New</iv-badge>

Examples

Variants

DefaultSecondaryFailedOutlineGhostLink
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvBadge } from '@inlaylab/ivorie/badge';

@Component({
  selector: 'demo-badge-variants',
  imports: [IvBadge],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex flex-wrap gap-2">
      <iv-badge>Default</iv-badge>
      <iv-badge variant="secondary">Secondary</iv-badge>
      <iv-badge variant="destructive">Failed</iv-badge>
      <iv-badge variant="outline">Outline</iv-badge>
      <iv-badge variant="ghost">Ghost</iv-badge>
      <iv-badge variant="link">Link</iv-badge>
    </div>
  `,
})
export default class BadgeVariantsDemo {}

With icon

Verified 
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvBadge } from '@inlaylab/ivorie/badge';
import { LucideCheck } from '@lucide/angular';

@Component({
  selector: 'demo-badge-icon',
  imports: [IvBadge, LucideCheck],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-badge variant="secondary">
      <svg lucideCheck></svg>
      Verified
    </iv-badge>
  `,
})
export default class BadgeIconDemo {}

In a card action

BuildLast run on main.3 errors
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvBadge } from '@inlaylab/ivorie/badge';
import { IV_CARD_IMPORTS } from '@inlaylab/ivorie/card';

@Component({
  selector: 'demo-badge-card-action',
  imports: [IvBadge, IV_CARD_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-card class="w-full max-w-sm">
      <iv-card-header>
        <iv-card-title>Build</iv-card-title>
        <iv-card-description>Last run on main.</iv-card-description>
        <iv-card-action>
          <iv-badge variant="destructive">3 errors</iv-badge>
        </iv-card-action>
      </iv-card-header>
    </iv-card>
  `,
})
export default class BadgeCardActionDemo {}

API

Every part also accepts class.

iv-badge

Name Type Default Description
variant 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' 'default' Visual style.

Accessibility

A badge is plain inline content with no role. Do not rely on colour alone to show status: put the meaning in the text.

Notes

  • Direct svg children are sized automatically.
  • There is no asChild. To make a link, wrap the badge in an a, or use variant="link" for the look.