---
title: "Tag"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Tag for content labels, categories, and filters. Multiple sizes, colors, and shapes for skill lists, article metadata, and product attributes."
url: https://frutjam.com/pl/components/tag
---

# Tag Component

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

## Rozmiary tagów

```html
<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

```html
<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

```html
<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

```html
<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ą

```html
<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

```html
<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

```html
<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>
```