Data display

Overlay badge

Themed positioned badge for notification counts or status dots over avatars, icons, and tabs.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjOverlayBadgeComponent } from '@kouji-ui/components';

Loading editor

Playground

#playground

4 Unread notifications

value

variant

size

position

dot

hidden

<kj-overlay-badge
  [kjValue]="4"
  kjVariant="destructive"
  kjSize="md"
  kjPosition="top-end"
  kjDescription="Unread notifications"
>
  <kj-button kjVariant="outline">Inbox</kj-button>
</kj-overlay-badge>