---
title: "Badge"
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 Badge with solid, soft, outline, and ghost styles. Multiple sizes and semantic color variants for labels, statuses, and notification counts."
url: https://frutjam.com/pl/components/badge
---

# Badge Component

 Elementy plakietki to małe, kompaktowe etykiety służące do wyróżniania, kategoryzowania lub wyświetlania informacji o statusie. Zbudowane z semantycznego HTML i Tailwind CSS, plakietki obsługują wiele rozmiarów, kolorów i stylów, co pozwala na elastyczną integrację z tabelami, kartami, profilami użytkowników i systemami powiadomień. Lekkie i dostępne plakietki poprawiają hierarchię informacji bez dodawania bałaganu wizualnego.

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                                                       |
| --------------- | ------- | ---------------------------------------------------------- |
| badge           | Opierać | Mała etykieta wbudowana                                    |
| badge-outline   | Styl    | Przezroczyste wypełnienie z kolorową obwódką               |
| badge-soft      | Styl    | Stonowane przyciemnione tło                                |
| badge-ghost     | Styl    | Subtelne tło bez obramowania                               |
| badge-dashed    | Styl    | Styl przerywanej granicy                                   |
| badge-pill      | Styl    | W pełni zaokrąglony kształt pigułki                        |
| badge-rounded   | Styl    | Umiarkowane zaokrąglenie                                   |
| badge-circle    | Styl    | Okrąg o równej szerokości dla pojedynczych znaków lub cyfr |
| badge-square    | Styl    | Kwadrat bez zaokrągleń                                     |
| badge-xs        | Rozmiar | Bardzo mały                                                |
| badge-sm        | Rozmiar | Mały                                                       |
| badge-md        | Rozmiar | Średni (domyślny)                                          |
| badge-lg        | Rozmiar | Duży                                                       |
| badge-xl        | Rozmiar | Bardzo duży                                                |
| badge-2xl       | Rozmiar | 2× bardzo duże                                             |
| badge-primary   | Kolor   | Podstawowy kolor motywu                                    |
| badge-secondary | Kolor   | Kolor motywu drugorzędnego                                 |
| badge-accent    | Kolor   | Kolor motywu akcentującego                                 |
| badge-neutral   | Kolor   | Neutralny kolor motywu                                     |
| badge-info      | Kolor   | Kolor semantyczny informacji                               |
| badge-success   | Kolor   | Sukces semantyczny kolor                                   |
| badge-warning   | Kolor   | Ostrzeżenie kolor semantyczny                              |
| badge-error     | Kolor   | Błąd koloru semantycznego                                  |

## Podstawowe użycie

## Rozmiary odznak

```html
<span class="badge badge-xs">Xsmall</span>
<span class="badge badge-sm">Small</span>
<span class="badge badge-md">Medium</span>
<span class="badge badge-lg">Large</span>
<span class="badge badge-xl">Xlarge</span>
<span class="badge badge-2xl">2XLarge</span>
```

## Kolory odznak

```html
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-neutral">Neutral</span>
```

## Style odznak

### Miękkie odznaki

```html
<span class="badge badge-soft">Default</span>
<span class="badge badge-soft badge-primary">Primary</span>
<span class="badge badge-soft badge-secondary">Secondary</span>
<span class="badge badge-soft badge-accent">Accent</span>
<span class="badge badge-soft badge-info">Info</span>
<span class="badge badge-soft badge-success">Success</span>
<span class="badge badge-soft badge-warning">Warning</span>
<span class="badge badge-soft badge-error">Error</span>
<span class="badge badge-soft badge-neutral">Neutral</span>
```

### Zarys odznak

```html
<span class="badge badge-outline">Default</span>
<span class="badge badge-outline badge-primary">Primary</span>
<span class="badge badge-outline badge-secondary">Secondary</span>
<span class="badge badge-outline badge-accent">Accent</span>
<span class="badge badge-outline badge-info">Info</span>
<span class="badge badge-outline badge-success">Success</span>
<span class="badge badge-outline badge-warning">Warning</span>
<span class="badge badge-outline badge-error">Error</span>
<span class="badge badge-outline badge-neutral">Neutral</span>
```

### Przerywane odznaki

```html
<span class="badge badge-dashed">Default</span>
<span class="badge badge-dashed badge-primary">Primary</span>
<span class="badge badge-dashed badge-secondary">Secondary</span>
<span class="badge badge-dashed badge-accent">Accent</span>
<span class="badge badge-dashed badge-info">Info</span>
<span class="badge badge-dashed badge-success">Success</span>
<span class="badge badge-dashed badge-warning">Warning</span>
<span class="badge badge-dashed badge-error">Error</span>
<span class="badge badge-dashed badge-neutral">Neutral</span>
```

### Odznaki Duchów

```html
<span class="badge badge-ghost">Ghost</span>
```

## Kształty odznak

### Zaokrąglona odznaka

```html
<span class="badge badge-error badge-rounded">10</span>
```

### Odznaka pigułki

```html
<span class="badge badge-warning badge-pill">Pill badge</span>
```

### Odznaka kwadratowa

```html
<span class="badge badge-neutral badge-square">99+</span>
```

### Odznaka koła

```html
<span class="badge badge-success badge-circle">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
</span>
```

## Wskaźniki odznak

Puste plakietki idealnie nadają się na wskaźniki statusu lub kropki powiadomień.

```html
<span class="badge badge-primary badge-circle badge-lg"></span>
<span class="badge badge-primary badge-lg"></span>
<span class="badge badge-primary badge-md"></span>
<span class="badge badge-primary badge-sm"></span>
<span class="badge badge-primary badge-xs"></span>
```

## Skład odznaki

Zintegruj plakietki z ikonami lub zagnieźdź je w innych komponentach, takich jak przyciski.

### Odznaka z ikoną

```html
<span class="badge badge-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 16v-4"></path>
    <path d="M12 8h.01"></path>
  </svg>
  Info
</span>
<span class="badge badge-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m9 12 2 2 4-4"></path>
  </svg>
  Success
</span>
<span class="badge badge-warning">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
    <path d="M12 9v4"></path>
    <path d="M12 17h.01"></path>
  </svg>
  Warning
</span>
<span class="badge badge-error">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m4.9 4.9 14.2 14.2"></path>
  </svg>
  Error
</span>
```

### Odznaka wewnątrz przycisku

```html
<button class="btn btn-primary btn-sm btn-active">
  Message
  <span class="badge badge-primary badge-xs">+49</span>
</button>
<button class="btn btn-sm">
  Inbox
  <span class="badge badge-xs badge-primary">+27</span>
</button>
```