Badge Specification

Overview

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

<igx-avatar initials="ZK" roundShape="true">
    <igx-badge type="error" value="6" 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, navigation 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

igx-badge should always display little circular-shaped component with text/number/icon content and different color based on badge type.

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.

User Interface

The end user interface consists of:

1. Circular notification image.

2. Different colors based on badge type.

3. Different values used as notifications.

API

• Properties
• type - Set the type of the badge to either default, info, success, warning or error. This will change the background color of the badge according to the values set in the default theme.
• position - Set the position of the badge relative to its parent container to either top-right, top-left, bottom-right or bottom-left.
• value - Set the value to be displayed inside the badge.
• icon - Set an icon for the badge from the material icons set. Will not be displayed if value for the badge is already set.
• Methods Internal
• setClasses() - Applies CSS class based on the badge type.
• setPosition() - Applies CSS class based on position property.

ARIA support

• Roles:
• role="img"
• Attributes:
• aria-label="badge"
• aria-roledescription="roleDescription"