Badge

Badges are used to add additional information to any content.

free

Badge

Playground

color

size

shape

HTML

<ply-badge color="primary" size="md" shape="circle">Badge</ply-badge>

Basic

Use attribute color to control the color of the badges. Supported colors are "primary", "danger", "warning", "success" and "accent"

Badge Danger

Badge Primary

Badge Warning

Badge Accent

Badge Success

HTML

<ply-badge color="primary">Badge Primary</ply-badge>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add badge
// Paths are relative to aliases.components (default: src/app/components)
import { BadgeComponent } from './badge/badge.component';
import { BaseBadgeAddon } from './badge/base-badge-addon.directive';
import { BaseBadgeIconDirective } from './badge/base-badge-icon.directive';

@Component({
  selector: 'app-badge-example',
  imports: [
    BadgeComponent,
    BaseBadgeAddon,
    BaseBadgeIconDirective
  ],
  template: `...`
})
export class BadgeExampleComponent {}

Install

bash

npx ply-ui-cli add badge

Badge Shape

By default the badges has rounded shape if we want to be with rectangular shape use attribute shape='rectangular'

Badge Danger

Badge Primary

Badge Warning

Badge Accent

Badge Success

HTML

<ply-badge color="primary" shape="rectangular">Badge Primary</ply-badge>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add badge
// Paths are relative to aliases.components (default: src/app/components)
import { BadgeComponent } from './badge/badge.component';
import { BaseBadgeAddon } from './badge/base-badge-addon.directive';
import { BaseBadgeIconDirective } from './badge/base-badge-icon.directive';

@Component({
  selector: 'app-badge-example',
  imports: [
    BadgeComponent,
    BaseBadgeAddon,
    BaseBadgeIconDirective
  ],
  template: `...`
})
export class BadgeExampleComponent {}

Install

bash

npx ply-ui-cli add badge

Light Color Badge

Use attribute color to control the color of the badges. Supported light colors are "primary-light", "danger-light", "warning-light", "success-light" and "accent-light"

Badge Danger

Badge Primary

Badge Warning

Badge Accent

Badge Success

HTML

<ply-badge color="primary-light">Badge Primary</ply-badge>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add badge
// Paths are relative to aliases.components (default: src/app/components)
import { BadgeComponent } from './badge/badge.component';
import { BaseBadgeAddon } from './badge/base-badge-addon.directive';
import { BaseBadgeIconDirective } from './badge/base-badge-icon.directive';

@Component({
  selector: 'app-badge-example',
  imports: [
    BadgeComponent,
    BaseBadgeAddon,
    BaseBadgeIconDirective
  ],
  template: `...`
})
export class BadgeExampleComponent {}

Install

bash

npx ply-ui-cli add badge

Badge With Icon

Add preferred icon in front or back of the content of the badge.

Badge Danger

Badge Primary

Badge Danger

Badge Primary

HTML

<ply-badge color="primary">
  <ply-icon name="chevron-right"></ply-icon>
  Badge Primary
</ply-badge>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add badge
// Paths are relative to aliases.components (default: src/app/components)
import { BadgeComponent } from './badge/badge.component';
import { BaseBadgeAddon } from './badge/base-badge-addon.directive';
import { BaseBadgeIconDirective } from './badge/base-badge-icon.directive';

@Component({
  selector: 'app-badge-example',
  imports: [
    BadgeComponent,
    BaseBadgeAddon,
    BaseBadgeIconDirective
  ],
  template: `...`
})
export class BadgeExampleComponent {}

Install

bash

npx ply-ui-cli add badge

Badge With Button

Add a <button> with preferred icon inside to display it inside the badge.

Badge primary

Badge Primary

Badge primary

Badge Primary

HTML

<ply-badge color="success">
  Badge Primary
  <button>
    <ply-icon name="x"></ply-icon>
  </button>
</ply-badge>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add badge
// Paths are relative to aliases.components (default: src/app/components)
import { BadgeComponent } from './badge/badge.component';
import { BaseBadgeAddon } from './badge/base-badge-addon.directive';
import { BaseBadgeIconDirective } from './badge/base-badge-icon.directive';

@Component({
  selector: 'app-badge-example',
  imports: [
    BadgeComponent,
    BaseBadgeAddon,
    BaseBadgeIconDirective
  ],
  template: `...`
})
export class BadgeExampleComponent {}

Install

bash

npx ply-ui-cli add badge

Badge Size

Use size="" and define size with supported "md", "lg", "xl"

Base Size

Middle size

Large size

Extra large size

HTML

<ply-badge color="primary" size="lg">Large size</ply-badge>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add badge
// Paths are relative to aliases.components (default: src/app/components)
import { BadgeComponent } from './badge/badge.component';
import { BaseBadgeAddon } from './badge/base-badge-addon.directive';
import { BaseBadgeIconDirective } from './badge/base-badge-icon.directive';

@Component({
  selector: 'app-badge-example',
  imports: [
    BadgeComponent,
    BaseBadgeAddon,
    BaseBadgeIconDirective
  ],
  template: `...`
})
export class BadgeExampleComponent {}

Install

bash

npx ply-ui-cli add badge

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add badge

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add badge
// Paths are relative to aliases.components (default: src/app/components)
import { BadgeComponent } from './badge/badge.component';
import { BaseBadgeAddon } from './badge/base-badge-addon.directive';
import { BaseBadgeIconDirective } from './badge/base-badge-icon.directive';

@Component({
  selector: 'app-your-component',
  imports: [
    BadgeComponent,
    BaseBadgeAddon,
    BaseBadgeIconDirective
  ],
  template: `...`
})
export class YourComponent {}

API for badge — generated from JSDoc in the library source.

API reference for badge
API	Member	Type	Default	Description
`ply-badge`	`color`	`BadgeColor \| null`	`'primary'`	The visual color mapping. Defaults to 'primary'. `null` renders the neutral default.
`ply-badge`	`size`	`BadgeSize`	`'md'`	The size of the badge. Defaults to 'md'.
`ply-badge`	`shape`	`BadgeShape`	`'circle'`	The shape (roundness) of the badge. Defaults to 'circle' (pill).
`[badge-icon]`	`color`	`'red' \| 'blue' \| 'green' \| 'yellow' \| 'purple' \| 'gray' \| 'indigo' \| 'pink' \| string`	—	Tailwind color name (e.g., 'red', 'blue', 'green'). Defaults to 'red'.
`[badge-icon]`	`size`	`'12' \| '16' \| '20' \| '24' \| '28' \| '32' \| string`	—	Numeric Tailwind spacing size for width and height (e.g., '16', '24'). Defaults to '16'.
`[ply-badge-addon]`	`color`	`string \| null`	`'primary'`	The color input property.
`[ply-badge-addon]`	`size`	`unknown`	`'md'`	The size input property.
`[ply-badge-addon]`	`width`	`string`	`''`	The width input property.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).