Free
Pro

Badge

Badges are used to add additional information to any content.

free

Basic

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

Badge DangerBadge PrimaryBadge WarningBadge AccentBadge Success

HTML

Badge Shape

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

Badge DangerBadge PrimaryBadge WarningBadge AccentBadge Success

HTML

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 DangerBadge PrimaryBadge WarningBadge AccentBadge Success

HTML

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

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

Badge Size

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

Base Size Middle size Large size Extra large size

HTML

Installation

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

bash

npx base-ui-cli add badge

API Reference

For AI agents

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

bash

npx -y base-ui-mcp

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

typescript (Example)

// Install: npx base-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
APIMemberTypeDefaultDescription
base-badgecolorBadgeColor | null'primary'The visual color mapping. Defaults to 'primary'. `null` renders the neutral default.
base-badgesizeBadgeSize'md'The size of the badge. Defaults to 'md'.
base-badgeshapeBadgeShape'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'.
[base-badge-addon]colorstring | null'primary'The color input property.
[base-badge-addon]sizeunknown'md'The size input property.
[base-badge-addon]widthstring''The width input property.