Badges

A badge marks an icon or a navigation item with news: a dot for something new, a number for how much of it there is. Keep it to a count someone can act on.

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.

<script lang="ts">
	import { Badge } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

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

<script lang="ts">
	import { Badge } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

<span style="position:relative;display:inline-flex">
	<Icon>person</Icon>
	<Badge label={6} --np-badge-end="-0.5rem" --np-badge-top="-0.25rem" />
</span>
<span style="position:relative;display:inline-flex">
	<Icon>settings</Icon>
	<Badge label={99} --np-badge-end="-0.75rem" --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.

Example#

<script lang="ts">
	import { Badge } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

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

Theming#

A badge takes its colors from the error role, so it stays legible in both color schemes without any work. Position it with the custom properties below when the element underneath is not the usual icon.

The container color is --np-color-error and the label --np-color-on-error. Change the pair on an ancestor to recolor a badge, and see Theming for the roles themselves.

Accessibility#

A badge is decorative by default: it renders aria-hidden, because a number floating beside an icon means nothing on its own. The icon button or navigation item it sits on carries the name.

Where the count is news, pass aria-label. The badge then becomes a role="status" with that name, and a screen reader announces it when it changes. Write the label out in full, 3 unread messages rather than 3.

API#

Attributes#