Tag Component
CSS-only Tailwind CSS tag (chip) with color variants, soft style, and removable button. Sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Składniki tagów wyświetlają małe, oznaczone fragmentami informacji, używane do kategoryzowania, filtrowania lub oznaczania treści. Zbudowane w oparciu o semantyczny kod HTML i elastyczną stylizację, tagi pomagają użytkownikom szybko identyfikować typ, stan lub kategorię treści. System tagów Frutjam obsługuje wiele rozmiarów, kolorów, stylów i kształtów — idealnie nadaje się do list umiejętności, kategorii artykułów, etykiet stanu i metadanych treści.
Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
| Klasa | Typ | Opis |
|---|---|---|
| tag | Opierać | Wbudowana etykieta do kategoryzowania lub identyfikowania treści |
| tag-outline | Styl | Przezroczyste wypełnienie z kolorową obwódką |
| tag-soft | Styl | Stonowane przyciemnione tło |
| tag-square | Styl | Lekkie zaokrąglenie (mniej niż domyślna pigułka) |
| tag-remove | Modyfikator | Przycisk Odrzuć/Usuń wewnątrz tagu |
| tag-xs | Rozmiar | Bardzo mała (czcionka 0,6875 rem) |
| tag-sm | Rozmiar | Mały (czcionka 0,75 rem) |
| tag-md | Rozmiar | Średni (czcionka 0,8125 rem, domyślna) |
| tag-lg | Rozmiar | Duży (czcionka 0,9375 rem) |
| tag-xl | Rozmiar | Bardzo duży (czcionka 1rem) |
| tag-primary | Kolor | Podstawowy kolor motywu |
| tag-secondary | Kolor | Kolor motywu drugorzędnego |
| tag-accent | Kolor | Kolor motywu akcentującego |
| tag-neutral | Kolor | Neutralny kolor motywu |
| tag-info | Kolor | Kolor semantyczny informacji |
| tag-success | Kolor | Sukces semantyczny kolor |
| tag-warning | Kolor | Ostrzeżenie kolor semantyczny |
| tag-error | Kolor | Błąd koloru semantycznego |
Podstawowe użycie
Tag
Another tag
Third tag
1 2 3 | <div class="tag">Tag</div> <div class="tag">Another tag</div> <div class="tag">Third tag</div> |
1 2 3 | <div className="tag">Tag</div> <div className="tag">Another tag</div> <div className="tag">Third tag</div> |
Rozmiary tagów
Extra Small
Small
Medium
Large
html
1 2 3 4 | <div class="tag tag-xs">Extra Small</div> <div class="tag tag-sm">Small</div> <div class="tag tag-md">Medium</div> <div class="tag tag-lg">Large</div> |
Kolory tagów
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
html
1 2 3 4 5 6 7 8 | <div class="tag">Default</div> <div class="tag tag-primary">Primary</div> <div class="tag tag-secondary">Secondary</div> <div class="tag tag-accent">Accent</div> <div class="tag tag-info">Info</div> <div class="tag tag-success">Success</div> <div class="tag tag-warning">Warning</div> <div class="tag tag-error">Error</div> |
Style tagów
Default
Outline
Soft
Dashed
html
1 2 3 4 | <div class="tag tag-primary">Default</div> <div class="tag tag-primary tag-outline">Outline</div> <div class="tag tag-secondary tag-soft">Soft</div> <div class="tag tag-accent tag-dashed">Dashed</div> |
Kształty tagów
Square
Rounded
Pill
C
html
1 2 3 4 | <div class="tag">Square</div> <div class="tag tag-rounded">Rounded</div> <div class="tag tag-pill">Pill</div> <div class="tag tag-circle">C</div> |
Oznacz z ikoną
Starred
html
1 2 3 4 | <div class="tag tag-primary"> <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg> Starred </div> |
Zamykane znaczniki
JavaScript
React
TypeScript
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="tag tag-primary"> JavaScript <button class="tag-remove" aria-label="Close">×</button> </div> <div class="tag tag-secondary"> React <button class="tag-remove" aria-label="Close">×</button> </div> <div class="tag tag-accent"> TypeScript <button class="tag-remove" aria-label="Close">×</button> </div> |
Lista tagów
JavaScript
React
CSS
UI Design
Frontend
Production
html
1 2 3 4 5 6 7 8 | <div class="flex flex-wrap gap-2"> <div class="tag">JavaScript</div> <div class="tag tag-primary">React</div> <div class="tag tag-secondary">CSS</div> <div class="tag tag-accent">UI Design</div> <div class="tag tag-info">Frontend</div> <div class="tag tag-success">Production</div> </div> |