1. Docs
2. Komponenten
3. Abzeichen

Abzeichen 1.2.0

Klein count and labelling component using .velin-badge. Available in six colour variants with outline, dot, and large size modifiers. English: Badge

Wann verwenden

• Kompakte Status- oder Zaehlerlabels neben Text, Ueberschriften oder Navigationseintraegen mit .velin-badge.
• Nicht interaktive Metadaten (neu, Beta, Anzahl), die visuell zweitrangig bleiben sollen.

Wann nicht verwenden

• Filterbare/entfernbare Tags: verwende Chip.
• Primaere Call-to-Aktion-Labels: verwende einen Button.

Farbvarianten

<span class="velin-badge">Default</span>
<span class="velin-badge velin-badge--primary">Primary</span>
<span class="velin-badge velin-badge--secondary">Secondary</span>
<span class="velin-badge velin-badge--success">Success</span>
<span class="velin-badge velin-badge--warning">Warning</span>
<span class="velin-badge velin-badge--danger">Danger</span>
<span class="velin-badge velin-badge--info">Info</span>

Kontur

<span class="velin-badge velin-badge--primary velin-badge--outline">Primary</span>
<span class="velin-badge velin-badge--danger velin-badge--outline">Danger</span>

Dot & Groessen

<!-- Dot -->
<span class="velin-badge velin-badge--success velin-badge--dot"></span>

<!-- Large -->
<span class="velin-badge velin-badge--primary velin-badge--lg">Large badge</span>

Barrierefreiheit

• Verwende aria-label bei Punkt-Abzeichen, um Bedeutung zu vermitteln (z. B. aria-label="Online").
• Wenn ein Abzeichen Zaehlerinformation vermittelt, verwende aria-label oder kombiniere es mit sichtbarem Text.

CSS-Variablen

Verwandt

• Chip
• Alerts
• Avatar