Badges & Labels
Kleine Statusanzeiger, Zähler und Beschriftungselemente aus UIkit und dem eigenen Design-System.
UIkit Badge
Runde Zähler-Badges für Nachrichten, Benachrichtigungen und Status:
42
12
!
HTML
<span class="uk-badge">42</span>
<!-- Mit Farbe -->
<span class="uk-badge" style="background:#22c55e;">OK</span>
<!-- An Button -->
<button class="uk-button uk-button-default" style="position:relative;">
Nachrichten
<span class="uk-badge" style="position:absolute;top:-5px;right:-8px;">7</span>
</button>
UIkit Label
Textuelle Beschriftungen für Status, Kategorien und Tags:
Standard
Aktiv
Ausstehend
Gesperrt
HTML
<span class="uk-label">Standard</span>
<span class="uk-label uk-label-success">Aktiv</span>
<span class="uk-label uk-label-warning">Ausstehend</span>
<span class="uk-label uk-label-danger">Gesperrt</span>
Custom Badges (Design-System)
Eigene Badge-Stile aus docs.css mit Pill-Form und Icon-Unterstützung:
HTML
<span class="topbar-badge">
<i class="fa-solid fa-circle-check"></i> Stabil
</span>
In Tabellen und Listen
| Middleware | Typ | Status |
|---|---|---|
| AuthMiddleware | Session | Aktiv |
| CsrfMiddleware | Token | Aktiv |
| RateLimitMiddleware | Sliding Window | Optional |