Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Badge Component

CSS-only Tailwind CSS badge with primary, secondary, accent, info, success, warning, and error variants. Soft, outline, and ghost styles, sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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
badgeOpieraćMała etykieta wbudowana
badge-outlineStylPrzezroczyste wypełnienie z kolorową obwódką
badge-softStylStonowane przyciemnione tło
badge-ghostStylSubtelne tło bez obramowania
badge-dashedStylStyl przerywanej granicy
badge-pillStylW pełni zaokrąglony kształt pigułki
badge-roundedStylUmiarkowane zaokrąglenie
badge-circleStylOkrąg o równej szerokości dla pojedynczych znaków lub cyfr
badge-squareStylKwadrat bez zaokrągleń
badge-xsRozmiarBardzo mały
badge-smRozmiarMały
badge-mdRozmiarŚredni (domyślny)
badge-lgRozmiarDuży
badge-xlRozmiarBardzo duży
badge-2xlRozmiar2× bardzo duże
badge-primaryKolorPodstawowy kolor motywu
badge-secondaryKolorKolor motywu drugorzędnego
badge-accentKolorKolor motywu akcentującego
badge-neutralKolorNeutralny kolor motywu
badge-infoKolorKolor semantyczny informacji
badge-successKolorSukces semantyczny kolor
badge-warningKolorOstrzeżenie kolor semantyczny
badge-errorKolorBłąd koloru semantycznego

Podstawowe użycie

Badge 
<span class="badge">Badge</span>

<span className="badge">Badge</span>

Rozmiary odznak

Xsmall Small Medium Large Xlarge 2XLarge
html 
1
2
3
4
5
6
<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

Default Primary Secondary Accent Info Success Warning Error Neutral
html 
1
2
3
4
5
6
7
8
9
<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

Default Primary Secondary Accent Info Success Warning Error Neutral
html 
1
2
3
4
5
6
7
8
9
<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

Default Primary Secondary Accent Info Success Warning Error Neutral
html 
1
2
3
4
5
6
7
8
9
<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

Default Primary Secondary Accent Info Success Warning Error Neutral
html 
1
2
3
4
5
6
7
8
9
<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

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

Kształty odznak

Zaokrąglona odznaka

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

Odznaka pigułki

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

Odznaka kwadratowa

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

Odznaka koła

html 
1
2
3
<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 
1
2
3
4
5
<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ą

Info Success Warning Error
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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 
1
2
3
4
5
6
7
8
<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>