Badge

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.

Standard badges

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

Custom badges

Preview badge with custom text

<sme-badge type="preview" [label]="'CUSTOM'" [learnMoreLink]="'http://www.bing.com'"></sme-badge>

New badge with custom description

<sme-badge type="new" [description]="'This is a custom description'" [learnMoreLink]="'http://www.bing.com'"></sme-badge>

Coming Soon badge with custom tooltip

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

Completely Custom

<sme-badge type="custom" class="sme-background-color-purple-80 sme-color-light" [label]="'CUSTOM'" [description]="'This is a custom description'"></sme-badge>

Header Badges

Header

Header

Header

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