N
neokit

Indicator

Overlay badge / dot / counter on top of any element. Uses named slot indicator for the badge and the default slot for the main content.

Default

No position prop — defaults to top-end (top-right).

Badge on a button
99+

Positions

9 positions: top / middle / bottom × start / center / end.

All 9 positions
content
top-start
content
top-center
content
top-end
content
middle-start
content
middle-center
content
middle-end
content
bottom-start
content
bottom-center
content
bottom-end

On an image

Works on any child element, including images.

Avatar with online dot
avatar
!
avatar

On a card

Common use case: "new" badge on a product card.

Card with badge indicator
New

Product name

Description of the product goes here.