Badge

Synonyme: Beschriftung, Status-Anzeige, Tag, Chip, Pill, Label

Beschreibung: Die Badge-Komponente hebt bestimmte Informationen optisch hervor. Sie unterstützt die Angabe einer Hintergrundfarbe mit automatischer Berechnung der Textfarbe für optimalen Kontrast, die optionale Hinzufügung eines Icons und eine flexible Gestaltung durch externe CSS-Anpassungen.

Beispiel

Darstellung eines einfachen Badges mit Hintergrundfarbe und Icon:

<KolBadge _color="#0c8703" _icons="kolicon-check" _label="Badge" />

Barrierefreiheit

• Automatischer Kontrast: Die Textfarbe wird automatisch basierend auf der Hintergrundfarbe berechnet und ist entweder Schwarz oder Weiß, um einen optimalen Kontrast sicherzustellen.
• Icon-Unterstützung: Die Ausgabe eines Icons gewährleistet, dass auch visuelle Informationen zusätzlich zur Textinformation erfasst werden können.
• Label erforderlich: Jedes Badge muss ein Label über das Attribut _label haben, damit die Information auch für Screenreader verfügbar ist.
• Kontextbindung: Badges sollten immer im Kontext einer aussagekräftigen Überschrift verwendet werden, nicht isoliert.

Links und Referenzen

Verwendung

Best Practices / Empfehlungen

• Verwenden Sie Badges, um wichtige Informationen in unmittelbarer Nähe des jeweiligen Elements anzuzeigen.
• Verwenden Sie Badges, um auf geänderte Werte oder einen geänderten Status aufmerksam zu machen.
• Badges können darauf hinweisen, dass etwas neu hinzugekommen oder aktualisiert wurde, z. B. „Neu", „Aktualisiert" oder ähnliches.
• Behalten Sie die Position des Badges konsistent bei, um ein einheitliches Erscheinungsbild zu gewährleisten.
• Setzen Sie für den _color-Wert eine hexadezimale Farbe (z. B. #0c8703), um automatische Kontrastberechnung zu nutzen.
• Vermeiden Sie es, Badges isoliert anzuzeigen; binden Sie sie immer in einen aussagekräftigen Kontext ein.

Anwendungsfälle

• Status-Kennzeichnung (z. B. „Neu", „Aktiv", „Inaktiv")
• Nummerierungen in mehrstufigen Prozessen oder Checklisten
• Benachrichtigungszähler oder Aktivitätsindikatoren
• Kategorie-Zuordnung oder Tagging
• Bestätigung oder Erfolgsbestätigung in Formularen
• Visuelles Highlighting von wichtigen Informationen nebeneinander mit anderen Elementen

Playground

Icons

<KolBadge _color="#0c8703" _label="Badge" />

Funktionalitäten

Label

Das Label ist erforderlich und definiert den Text, der im Badge angezeigt wird. Der Text kann Sonderzeichen, Umlaute und Leerzeichen enthalten.

<KolBadge _color="#0c8703" _label="Beispieltext" />

Property	Beschreibung
_label	Der anzuzeigende Text im Badge (erforderlich)

Farben

Die Hintergrundfarbe wird über das Attribut _color definiert. Die Textfarbe wird automatisch berechnet und ist entweder Weiß oder Schwarz, um optimalen Kontrast zu gewährleisten. Eine explizite Angabe der Textfarbe ist nicht möglich.

<KolBadge _color="#b7e4b4" _label="Helles Badge" />

Property	Beschreibung	Default
_color	Hintergrundfarbe als Hex-Wert oder Objekt mit backgroundColor und foregroundColor	'#000'

Icons

Icons können als String (Klassenname) oder als komplexes Icon-Objekt mit horizontalen und vertikalen Positionen übergeben werden.

Icons

<KolBadge _color="#0c8703" _icons="kolicon-house" _label="Mit Icon" />

Property	Beschreibung
_icons	Icon-Klassenname(n) oder Icon-Konfigurationsobjekt

Smart Button

Das Badge kann mit einem Smart-Button verknüpft werden, der eine Aktion auslöst. Dies wird nur mit _hide-label angezeigt.

<KolBadge _color="#0c8703" _label="Mit Button" />

Property	Beschreibung
_smartButton	Button-Konfiguration für eine Aktion innerhalb des Badges

API

Overview

The Badge component allows you to visually highlight specific information. In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.

Properties

Property	Attribute	Description	Type	Default
_color	_color	Defines the backgroundColor and foregroundColor.	string | undefined | { backgroundColor: string; foregroundColor: string; }	'#000'
_icons	_icons	Defines the icon classnames.	KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined	undefined
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_smartButton	_smart-button	Allows to add a button with an arbitrary action within the element (_hide-label only).	string | undefined | { _label: string; } & { _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: "tab" | "treeitem" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _variant?: VariantClassNamePropType | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }	undefined

Methods

focus

focus(options?: KolFocusOptions) => Promise<void>

Sets focus on the internal element.

Parameters

Name	Type	Description
options	KolFocusOptions | undefined

Returns

Type: Promise<void>

Slots

Slot	Description
"expert"	Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot

---