A badge component is a short inline call-out used to attract attention or flag status. Typically it should be used when the user should be aware of the state of some UX at a glance.
<sme-badge type="comingSoon" [learnMoreLink]="'http://www.bing.com'"></sme-badge>
<sme-badge type="new"></sme-badge>
<sme-badge type="preview" [learnMoreLink]="'http://www.bing.com'"></sme-badge>
<sme-badge type="warning" [label]="'WARNING'" [description]="'This is a warning message'"></sme-badge>
<sme-badge type="critical" [label]="'CRITICAL'" [description]="'This is a critical message'"></sme-badge>
<sme-badge type="preview" [label]="'CUSTOM'" [learnMoreLink]="'http://www.bing.com'"></sme-badge>
<sme-badge type="new" [description]="'This is a custom description'" [learnMoreLink]="'http://www.bing.com'"></sme-badge>
<sme-badge type="comingSoon" [tooltip]="tooltip" [learnMoreLink]="'http://www.bing.com'"></sme-badge>
<ng-template #tooltip>
<form>
<sme-form-field type="checkbox" label="Do something cool." name="checkbox" ngModel="checkbox"></sme-form-field>
<button>Do Something</button>
</form>
</ng-template>
<sme-badge type="custom" class="sme-background-color-purple-80 sme-color-light" [label]="'CUSTOM'" [description]="'This is a custom description'"></sme-badge>
<header class="sme-layout-tool-header">
<h3>Header</h3>
<sme-badge type="comingSoon"></sme-badge>
<sme-badge type="new"></sme-badge>
<sme-badge type="preview"></sme-badge>
</header>