Badge Hilfsfunktionen

Die badge Komponente zeigt kompakte Status- oder Kategoriebezeichnungen an. Badges eignen sich ideal für Tags, Zähler oder kurze Statusanzeigen.

Funktionen

  • Typen: primär, sekundär, neutral, Info, Erfolg, Warnung, Gefahr und deaktiviert.

  • Größen: Fünf Größen (xs, s, m, l, xl) für unterschiedliche Anwendungsbereiche.

  • Icons: Können wahlweise vor oder hinter der Beschriftung platziert werden.

  • Tooltips: Optionaler Text, welcher beim Bewegen des Mauszeigers angezeigt wird und zusätzliche Informationen liefert.

HTML

Verwendung

Die Komponente wird über das badge Tag eingebunden.

{% load insight_tags %} <!-- Standard / Filled --> {% badge label=_("Primary") type="primary" %} <!-- Size --> {% badge label=_("New!") type="primary" size="xl" %} <!-- Icons --> {% badge label=_("New!") icon_name="sparkles" %} {% badge label=_("New!") icon_name="sparkles" icon_end=True %}

Parameter

Laden…

config (BadgeConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
label str

Beschriftung der Plakette.

 None True
icon

Ein optionales Icon, das vor dem Text angezeigt wird.

 None False
icon_end bool

True if the icon should be shown after the label, otherwise the icon is shown in front of the label.

 False False
type BadgeType
BadgeType

Extended color palette for badges, includes 'disabled' state.

primary secondary neutral info success warning danger disabled
Typen Dokumentation →

Defines the color of the badge.

 primary False
size Size
Size

Standard size scale used for spacing, icons, and component dimensions.

xs s m l xl
Typen Dokumentation →

Defines the size of the badge.

 m False
tooltip str

Optionaler Tooltip-Text, welcher beim Darüberfahren mit der Maus angezeigt wird.

 "" False
BadgeConfig("New Feature", IconConfig("sparkles", "s"))

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

Offene Punkte

  • Status-Badges (success, danger, warning, info) sollten role='status' haben.

  • Benachrichtigungs-Badges sollten ein aria-label haben, das ihre Bedeutung beschreibt.

Verwandte Themen