Badge Component

The Angular Badge component is provided by the platform-specific Ignite UI for Angular package and is used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed with predefined styles to communicate information, success, warnings, or errors.

Live Demo

The Angular Badge demo shows how the component can communicate a compact status or notification next to another interface element.

Anatomy

The Angular Badge presents a compact label or dot indicator that decorates another interface element.

The component renders its content inside the base CSS part. Use the component’s default slot for text or other inline content; when dot is enabled, the badge renders as an indicator without content.

<igc-badge>
└── ::part(base)
  └── default slot content
</igc-badge>

Getting Started

To use the Angular Badge, follow the Ignite UI for Angular Getting Started topic for the basic project setup, then register the component for your target platform.

Prerequisites and Version Compatibility

Use a supported version of the Ignite UI for Angular package for your target framework. Keep the framework package, the Badge package, and the theme package on the same release version. The examples below identify the framework and package used by each code block so that the snippets remain self-contained when read without the surrounding page context.

For Angular using the igniteui-angular package, install the package:

npm install igniteui-angular

Then import the Badge component:

import { IgxBadgeComponent } from 'igniteui-angular/badge';

Add IgxBadgeComponent to the component imports collection, then use the igx-badge element in your template.

The simplest way to start using the Badge is as follows:

<igx-badge></igx-badge>

Usage

Use the Angular Badge to display a short status, category, count, or notification indicator alongside another component.

Let’s see how the demo sample is done. It’s a simple success badge on an avatar. To build that, import the IgxAvatarModule together with the IgxBadgeModule:

import { IgxBadgeModule } from 'igniteui-angular/badge';
import { IgxAvatarModule } from 'igniteui-angular/avatar';

Add both modules to the component imports collection, or import the standalone components. Then add the components to your template:

<div class="wrapper">
  <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
  <igx-badge icon="check" type="success"></igx-badge>
</div>

Use a relatively positioned wrapper to place the Badge over the avatar:

.wrapper {
  position: relative;
  margin-top: 15px;
}

igx-badge {
  position: absolute;
  bottom: 0;
  left: 28px;
}

Type

The Badge can carry different types of content such as a number or an icon.

Use the [value] input to display text or a numeric count inside the Badge:

<igx-badge [value]="model.value"></igx-badge>

Use the [icon] input to display an icon inside the Badge:

<igx-badge icon="check" type="success"></igx-badge>

When both [icon] and [value] are set, the Badge displays both simultaneously:

<igx-badge icon="check" value="5" type="success"></igx-badge>

You can also project content directly. When projecting both an icon and text, wrap the text to keep the correct padding:

<igx-badge>
  <igx-icon>bluetooth</igx-icon>
  <span>Bluetooth</span>
</igx-badge>

Icon

In addition to Material Icons, the Angular Badge supports Material Icons Extended and other custom icon sets. Register the custom icon with IgxIconService, then specify its name and icon set:

this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');

<igx-badge icon="heart-monitor" iconSet="imx-icons"></igx-badge>

Dot

The Ignite UI for Angular Badge can also render as a minimal dot indicator for notifications by setting its dot attribute. Dot badges do not support content, but they can be outlined and can use any of the available dot types (for example, primary, success, or info).

Set the dot attribute to render a minimal notification indicator without content:

<igx-badge dot></igx-badge>

Size

Control the Badge size with the --size CSS variable. For text badges smaller than 16px, also adjust the font size and line height:

igx-badge {
  --size: 12px;

  font-size: calc(var(--size) / 2);
  line-height: normal;
}

Shape

The Badge shape can be set to rounded (the default) or square with the shape attribute.

<igx-badge icon="check" type="success" shape="square"></igx-badge>

When the Badge has a square shape, it can be further customized by setting a custom border radius using the --border-radius CSS variable.

Variants

The Angular Badge supports the Primary, Info, Success, Warn, and Error types. Set the type attribute to select a type.

<igx-badge type="success"></igx-badge>

Outlined

The badge can also have a subtle border around it when the outlined attribute is set.

<igx-badge outlined></igx-badge>

Do/Don’t

When to use: Use a Badge to communicate a short status, category, count, or notification state alongside another component. Use dot when the indicator does not need visible text.

When not to use: Do not use a Badge as the primary control for an action, as a replacement for a form validation message, or when the status cannot be understood from the badge content, surrounding context, or accessible labeling.

Do	Don’t

Properties

The Angular Badge exposes platform-specific properties for controlling its content, appearance, and indicator behavior.

The Angular Badge exposes the following properties. Use the API reference for the complete type definitions.

Styling

The Angular Badge uses the Badge component’s base CSS part and documented styling variables to customize its appearance.

Sass Theming

Use the Ignite UI for Angular theme system to style the Badge consistently with the rest of your application.

CSS Variables

igc-badge::part(base) {
  --background-color: var(--ig-error-A100);
  --border-radius: 2px;
}

Style Parts

Styling with Tailwind

You can style the Badge using custom Tailwind utility classes. Make sure to set up Tailwind first.

Along with the Tailwind import in your global stylesheet, include the utility file:

@import "tailwindcss";
@use 'igniteui-theming/tailwind/utilities/material.css';

Use light-badge and dark-badge for the light and dark theme variants. You can override the generated CSS variables with arbitrary properties:

<igx-badge
  class="!light-badge ![--background:#FF4E00] ![--border-radius:4px]">
</igx-badge>

The exclamation mark (!) ensures that the utility class takes precedence over the component’s default theme.

Accessibility

The Angular Badge communicates a visual status and must have meaningful text or surrounding accessible context when that status is important.

Keyboard Interaction

The Badge is a visual status indicator and does not provide an interactive keyboard action. It is reached according to the focus behavior of the element it decorates.

Screen Readers / ARIA

Provide meaningful visible content or an accessible label in the surrounding component when the Badge conveys information that is not otherwise available to assistive technology. Verify the resulting announcement for the specific surrounding control.

Accessibility Compliance

Accessibility conformance for this component must be verified against the official product accessibility statement and the rendered usage context.

Troubleshooting

The Angular Badge troubleshooting guidance follows a problem → cause → fix format for common styling and content issues.

Why does my custom background color not change the Badge?

The selected variant takes precedence over the --background-color CSS variable. To use a custom background color, avoid setting a variant that applies its own background color.

Why is my dot Badge not displaying content?

The dot property renders the Badge as a minimal indicator and does not support content. Use a regular Badge when you need to display text or other inline content.

Known Limitations

The Angular Badge has the following platform-independent limitations.

• A dot Badge is an indicator only and cannot display text or an icon.
• Badge styling and variant/type names differ between Angular and the other supported frameworks. Use the platform-specific examples and API links on this page rather than copying an attribute between frameworks.
• The Badge is a visual status indicator and does not provide keyboard interaction of its own.

API References

Dependencies

The Angular Badge requires a theme stylesheet to apply its visual styling. See the framework-specific setup in Getting Started.

Additional Resources

The following resources provide additional Angular Badge guidance and project support.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub

Related Components

The Angular Badge is commonly used with related components such as Avatar when a status indicator belongs to another visual element.

• Avatar — combine an Avatar with a Badge to show a status indicator.

FAQ

These frequently asked questions cover common Angular Badge content, indicator, and package choices.