Badge overview

NbBadgeComponent

Badge is a simple labeling component. It can be used to add additional information to any content or highlight unread items.

Element is absolute positioned, so parent should be positioned element. It means parent position should be set to anything except static, e.g. relative, absolute, fixed, or sticky.

Installation

Import NbBadgeModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbBadgeModule,
  ],
})
export class PageModule { }

Usage

Badge with default position and status(color):

<nb-badge text="badgeText"></nb-badge>

For example, badge can be placed into nb-card header:

Badge located on the bottom right with warning status:

<nb-badge text="badgeText" status="warning" position="bottom right">
</nb-badge>