Przejdź do treści
Sweet Lava Design System
↗ Strona

Komponenty Tagi i chipsy

Komponenty

Tagi i chipsy

Drobne etykiety: eyebrow nad nagłówkiem, klikalne pille i statyczne znaczniki statusu. To jedyne elementy z pełnym zaokrągleniem (rounded-pill) – celowy kontrast z ostrymi kartami.

Eyebrow / etykieta

Mała etykieta nad nagłówkiem sekcji. Wielkie litery, tracking 0.14em, kolor muted.

Studio design & development

html 
<p class="text-xs font-medium tracking-[0.14em] text-muted uppercase">Studio design &amp; development</p>

Pille nawigacyjne

Klikalne chipsy z obrysem – używane w klastrze powiązanych pojęć. Hover zmienia kolor obrysu i tekstu.

Design system UX 12 Core Web Vitals
html 
<a href="#" class="inline-flex items-center gap-2 rounded-pill border border-line bg-paper px-4 py-2 text-sm font-medium transition-colors hover:border-pine hover:text-pine">
  Design system
  <span class="text-xs text-muted">12</span>
</a>

Znaczniki statusu

Statyczne pille kolorem niosące stan. Miętowe = pozytywne / zatwierdzone, czerwone = błąd, szare = neutralne. Tak oznaczamy editorialStatus treści.

reviewed AI-draft błąd neutralny
html 
<span class="rounded-pill bg-mint-soft px-2.5 py-0.5 text-xs font-medium text-pine-deep">reviewed</span>
<span class="rounded-pill border border-line px-2.5 py-0.5 text-xs font-medium text-muted">AI-draft</span>
<span class="rounded-pill bg-[#fdecea] px-2.5 py-0.5 text-xs font-medium text-error">błąd</span>

Znacznik z obrysem

Mały znacznik wersji / meta w belce – obrys 1 px, bez tła.

v1.0 · 2026 PL · EN