You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Acceptance criteria
Have a badge that shows a value
Have a badge that shows an icon
The badge should adapt its width to fit the content
The badge should have a type indicating its importance e.g. informational or error
The badge should have an outline
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
3.1 End-User Experience
igx-badge should always display little circular-shaped component with text/number/icon content and different color based on badge type. The end-user interface consists of:
Circular notification image.
Different colors based on badge type.
Different values used as notifications.
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.
3.3. Globalization/Localization
3.4 API
Options
Name
Description
Type
Default value
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