UI: Badge
Eine kleine Zahl oder ein Status neben einem Element. Importiere die Token-Datei einmal (@pithyx/ui/tokens.css) und umschließe die App mit UiProvider; siehe @pithyx/ui.
Beim Build aus den TSDoc-Kommentaren von @pithyx/ui 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.
Funktionen
Abschnitt betitelt „Funktionen“Badge()
Abschnitt betitelt „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.
Parameter
Abschnitt betitelt „Parameter“| Parameter | Typ | Beschreibung |
|---|---|---|
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. |
Rückgabewert
Abschnitt betitelt „Rückgabewert“Element
The badge element.