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 to be able to provide a way to display ..

End user

Description

##Acceptance criteria

1. example
2. example

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: