Badge Specification

Overview

igx-badge is a circle shaped component, usually used to indicate that there is an update on status of the item related to (such as avatars, navigation menus, or anywhere else in an app where some active indication is required).

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

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 different type of values, using of material icons.

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

User Stories

Developer

As a developer I want:

• igx-badge to be used with other components like avatar, nav menus, list items etc.
• to manipulate the position of the badge.
• use different visual representation types like success badge or warning badge.
• to set different values like string, number, text or icon.

End user

As a end user, I want to:

• notice and determine status based on badge component color, value or position.

Acceptance criteria

1. Have badge that shows icon.

2. Have badge that shows number as counter.

3. Have badge that shows icon.

4. Have the ability to change badge position

5. Use different types of badge representations.

Functionality

End User Experience

Explanation

Developer Experience

someProperty: Description

Globalization/Localization

No localization options are envisaged.

User Interface

The end user interface consists of:

API

text

• Properties
• example
• example
• Methods Internal
• example
• example

ARIA support

• Roles:
• Attributes: