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

Element odznaki

Ostatnia aktualizacja:

Odznaka CSS Tailwind tylko dla CSS z wariantami podstawowymi, dodatkowymi, akcentami, informacjami, sukcesem, ostrzeżeniami i błędami. Style miękkie, konturowe i widmowe, rozmiary xs-lg. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

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

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

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

Rozmiary odznak

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

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

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

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

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

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

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>

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Odznaka. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP