Badges are highlighted text elements which are used to tag or highlight the state of an object.

<fdp-badge status="default">Label</fdp-badge>
<fdp-badge status="success">Label</fdp-badge>
<fdp-badge status="warning">Label</fdp-badge>
<fdp-badge status="error">Label</fdp-badge>

<fdp-badge isPill="true">Label</fdp-badge>

<fdp-badge isFilled="true">Label</fdp-badge>

<fdp-badge status="success" isPill="true" isFilled="true">Label</span>

Sets the color of the label text. Can have status value of 'default', 'success', 'warning' or 'error'.

Default: 'default'

Sets whether to display badge as a 'pill'.

Sets whether to fill background of badge.

type StatusType = 'default' | 'success' | 'warning' | 'error';

<span class="fd-badge" [ngClass]="[
    statusClass,
    isPill ? 'fd-badge--pill': '',
    isFilled ? 'fd-badge--filled': ''
]"><ng-content></ng-content></span>

statusClass is a CSS class name auto-generated based on value of property status.

• Fundamental Styles: Status Indicator

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-badge's label can be supported as:

<fdp-badge i18n="@@success" status="success">Label</fdp-badge>

Redesign Required: No

@Manju/Sushma: Fiori3 notifications has following types - badge/icon, banner, groups. Need to relook the design