Badges

Usage

Badges show notifications, counts, or status information on navigation items and icons. A badge is positioned relative to its anchor, so place it inside an element with position: relative.

Small badge

Without a label a badge renders as a small dot, indicating new content.

<span style="position:relative;display:inline-flex">
	<Icon>favorite</Icon>
	<Badge --np-badge-end="0" />
</span>

Large badge

Set a label to display a number or short text.

<span style="position:relative;display:inline-flex">
	<Icon>person</Icon>
	<Badge label={6} --np-badge-end="-0.5rem" --np-badge-top="-0.25rem" />
</span>

Positioning

By default a badge is positioned absolutely at the top of its anchor. Use the following custom properties to adjust its placement. They accept any valid CSS length or keyword.

Property	Default value	Description
`--np-badge-position`	`absolute`	The CSS `position` of the badge.
`--np-badge-top`	`0`	Distance from the top of the anchor.
`--np-badge-start`	`auto`	Distance from the inline-start edge of the anchor.
`--np-badge-end`	`auto`	Distance from the inline-end edge of the anchor.

Example

<span style="position:relative;display:inline-flex">
	<Icon>favorite</Icon>
	<Badge label={3} --np-badge-start="1rem" --np-badge-top="-0.25rem" />
</span>

API

Attributes

Attribute	Type	Default	Description
`label`	`string \| number \| undefined`	`undefined`	Content displayed inside the badge. When omitted, a small badge (dot) is shown.