Badges

Badges werden verwendet, um Status, Kategorien oder kurze Hinweise kompakt darzustellen.

Beispiele

Basic

Default


<span class="a-badge -neutral">
    Default
</span>

Status

Primary Stable Experimental Deprecated Neutral


<span class="a-badge -primary">Primary</span>
<span class="a-badge -success">Stable</span>
<span class="a-badge -warning">Experimental</span>
<span class="a-badge -danger">Deprecated</span>
<span class="a-badge -neutral">Neutral</span>

With Icon

Stable


<span class="a-badge -success">
    <span class="a-icon -sm">
        <svg aria-hidden="true">
            <use href="/assets/icons/sprite.svg#circle-check"></use>
        </svg>
    </span>
    Stable
</span>

Klassen

Klasse	Beschreibung
`.a-badge`	Basis-Klasse für Badges.
`.-primary`	Primäre Badge-Variante.
`.-success`	Badge für positive oder stabile Zustände.
`.-warning`	Badge für Warnungen oder experimentelle Zustände.
`.-danger`	Badge für kritische oder veraltete Zustände.
`.-neutral`	Neutrale Badge-Variante.

Hinweise

Badges sollten kurze Informationen enthalten. Für längere Hinweise eignen sich Callouts besser.

Best Practices

Verwende Badges für Status wie Stable, Experimental oder Deprecated.

Badges sollten nicht als Buttons verwendet werden. Für Aktionen sollte die Button-Komponente genutzt werden.

Accessibility

Die Bedeutung eines Badges sollte nicht ausschließlich über Farbe vermittelt werden. Der Text sollte den Status eindeutig beschreiben.