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.

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

npm install igniteui-angular

Then import IgxBadgeComponent in the component imports collection.

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

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

Style Parts

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

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 is a non-interactive status visual that communicates a short count, state, or notification.

Keyboard Interaction

The Badge does not receive focus, handle keyboard input, or expose component interaction events.

Screen Readers / ARIA

The Badge host uses role="status" to expose its content as status information.

• The component initializes with role="status" and aria-label="badge".
• Angular derives aria-roledescription from the Badge type and its icon or value. Set the label input when badge is not a meaningful accessible name.
• Add a meaningful label for a Badge without text or a dot Badge when its status is not otherwise available to assistive technology.

Accessibility Compliance

Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the Accessibility Compliance topic.

Your responsibilities:

• Provide an accessible name that explains the status when the Badge has no meaningful text, especially for dot Badges.
• Do not use Badge color as the only indication of status; pair it with text, an icon, or another accessible cue.
• Keep sufficient contrast between the Badge foreground and background when overriding theme styles.

Troubleshooting

Use this section to check boundaries and common decisions before treating Badge as an interactive control or the only indication of status.

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