Platform: Badge Component Technical Design

Badge

Summary

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

Example

<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>

Property Bindings

status: StatusType

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

Default: 'default'

isPill: Boolean

Sets whether to display badge as a 'pill'.

isFilled: Boolean

Sets whether to fill background of badge.

Types

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

Template

<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.

References

• Fundamental Styles: Status Indicator