Badge Specification

Owned by

Team Name

Developer Name

Stefan Ivanov / Svilen Dimchevski

Requires approval from

Peer Developer Name | Date:
Simeon Simeonov | Date:

Signed off by

Product Owner Name | Date:
Platform Architect Name | Date:

Revision History

Version	Users	Date	Notes
1	Stefan Ivanov	5 Jul 2021	Update spec format
2	Svilen Dimchevski	2 Oct 2025	Badge enhancements update

1. Overview

The badge is a small and rounded component with an indication showing that there is an update on a related item (such as avatar, navigation menu, list item, or anywhere else in an app where some active indication is required).

Objectives

igx-badge should be associated with other parent components in order to indicate status change. It should be highly customizable, providing capabilities like vertical and horizontal align, type changing, assigning the different type of values, using of material icons.

The badge supports multiple sizes (Small, Medium, Large).

Here's the design handoff in Figma

Design Handoff

Acceptance criteria

Have a badge that shows a value
Have a badge that shows an icon
Have a badge that renders as a dot when no value, text, or icon is provided.
The badge should adapt its width to fit the content
The badge should have a type indicating its importance: default, info, success, warning, or error
The badge should support an Outline option which is drawn outside of the badge so that it does not affect its content
The badge should provide a way to set the roundedness
The badge should be positioned in relation to another element e.g. in the top-right corner of the avatar
The badge should be available in multiple sizes: Small, Medium, Large

2. User Stories

Developer stories:

Story 1: As a developer, I want to use the badge with other components like avatar, navigation menus, list items etc.
Story 2: As a developer, I want to manipulate the position of the badge.
Story 3: As a developer, I want to use different visual representation types like success badge or warning badge.
Story 4: As a developer, I want to set different values like text, number, or icon, or use a Dot badge with no content. Dot badges can be any type (default, info, success, warning, error).

<igx-avatar initials="ZK" roundShape="true">
    <igx-badge type="error" value="6" position="bottom-left"></igx-badge>
</igx-avatar>

<igx-avatar src="https://unsplash.it/60/60?image=55" roundShape="true">
    <igx-badge icon="link" position="bottom-left"></igx-badge>
</igx-avatar>

<igx-avatar src="https://unsplash.it/60/60?image=56" roundShape="true">
    <igx-badge type="success" position="bottom-right"></igx-badge>
</igx-avatar>

Story 5: As a developer, I want to set the badge fill and outline color, with the outline drawn outside of the badge content.
Story 6: As a developer, I want to choose from Small, Medium, and Large badge sizes.

End-user stories:

Story 1: As an end-user, I want to be able to notice and determine the status of an element based on the badge attached to it and its color and value.

3. Functionality

3.1 End-User Experience igx-badge should always display a small component (circular or rectangular) with text, number, or icon content, or as a minimal Dot badge with no content. Colors are determined by the badge type (default, info, success, warning, error). The end-user interface consists of:

Circular or rectangular notification image.
Different colors based on badge type.
Different values used as notifications.
Different sizes: Small, Medium, Large
Dot type for minimal notification indication

3.2 Developer Experience

type: Type of the badge. Possible options default, info, success, warning, error. Will change the background color of the badge.

position: Set the position of the badge relative to its parent container to either top-right, top-left, bottom-right or bottom-left.

value: Displayed value inside the badge.

icon: Set an icon for the badge from the material icons set.

size: Sets the badge size. Possible values: small, medium, large.

3.3. Globalization/Localization

3.4 API

Options

Name	Description	Type	Valid values
`type`	Changes the background color of the badge according to the values set in the default theme	string	default, info, success, warning or error
`position`	Sets the position of the badge relative to its parent container		top-right, top-left, bottom-right or bottom-left
`value`	Sets the value to be displayed inside the badge	string or number
`icon`	Sets an icon for the badge from the material icons set. Will not be displayed if value for the badge is already set	string
`size`	Sets the size of the badge	string	small, medium, large