UI: Badge

A small count or status next to an item. Import the token file once (@pithyx/ui/tokens.css) and wrap the app in UiProvider; see @pithyx/ui.

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

Functions

Badge()

function Badge(props): Element;

A small count or status next to an item, for example in a list or on a tab. It is plain text for screen readers; give it words where a number alone says too little.

Parameters

Parameter	Type	Description
props	{ children: ReactNode; tone?: "danger" | "highlight" | "accent" | "neutral"; className?: string; }	The content and the tone.
props.children	ReactNode	The count or the status text.
props.tone?	"danger" | "highlight" | "accent" | "neutral"	The color: highlight (amber, the default), accent, neutral or danger.
props.className?	string	Extra class names, added after the badge’s own.

Returns

Element

The badge element.