Badge

Anatomia#

Instalacja#

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/badge.json

Użycie#

import { Badge, BadgeDot } from "@/components/ui/badge"

<Badge variant="success">
  <BadgeDot />
  Paid
</Badge>

Przykłady#

Warianty#

Warianty wyrażają znaczenie, a nie gust. Cztery warianty statusu — success, warning, destructive, info — są zarezerwowane dla stanów, więc zielona odznaka znaczy to samo w każdym miejscu produktu.

Rozmiary#

default (20 px) pasuje do tekstu głównego i komórek tabel. Używaj sm do liczników w nawigacji, a lg do odznak obok nagłówków.

Status#

Łącz odznaki statusu z BadgeDot. Kropka pozwala przejrzeć kolumnę stanów jednym spojrzeniem, a słowo sprawia, że stan jest jednoznaczny. Ustaw live, żeby kropka pulsowała przy stanach, które właśnie się zmieniają — pulsowanie wyłącza się automatycznie, gdy włączone jest ograniczenie ruchu.

Z ikonami#

Oznacz ikony atrybutem data-icon="inline-start" lub data-icon="inline-end"; odznaka zmniejszy po tej stronie wewnętrzny odstęp i nada ikonie rozmiar 12 px.

Jako link#

Odznaka może prowadzić dalej — do wpisu w dzienniku zmian, przefiltrowanej listy, tagu. Użyj propa render, żeby stała się prawdziwym linkiem; odznaki będące linkami automatycznie zyskują stan najechania.

<Badge variant="brand" render={<Link href="/docs/resources/changelog" />}>
  prfct 1.0 is here
</Badge>

Liczniki#

Licznik mówi, ile czeka w miejscu, do którego prowadzi. Pokazuj najwyżej 99+, pełnego wariantu default używaj tylko dla nieprzeczytanych elementów wymagających działania i dodaj do liczby kontekst dla czytników ekranu.

Wytyczne#

Kiedy używać#

• Aby pokazać stan obiektu: płatności, wdrożenia, usługi.
• Aby dodać krótkie metadane: rolę, wersję, plan, tag.
• Aby pokazać liczbę elementów czekających za pozycją nawigacji.

Kiedy nie używać#

• Do wywoływania akcji — użyj komponentu Button.
• Do filtrowania widoku — użyj komponentu Toggle Group lub pól wyboru, żeby zaznaczenie było ogłaszane.
• Do wyjaśniania — jeśli potrzeba więcej niż dwóch słów, potrzebne jest zdanie, Alert lub Tooltip.

Nigdy sam kolor#

Krótko#

Umiar#

Odznaki działają, bo są rzadkie. Jeśli każdy wiersz tabeli ma trzy odznaki, żadna nie zostanie zauważona — zostaw jedną odznakę statusu na obiekt, a resztę metadanych przenieś do zwykłego tekstu.

Dostępność#

• Domyślnie statyczna. Odznaka renderuje <span> i nie przyjmuje fokusu. Gdy prowadzi do innej strony, renderuj ją jako link — wtedy zyska rolę, fokus i widoczny pierścień fokusu.
• Status to tekst. Każdy wariant statusu łączy kolor ze słowem. BadgeDot ma aria-hidden; znaczenie niesie etykieta.
• Liczniki wymagają kontekstu. Samo „12” odczytane na głos jest niejednoznaczne. Dodaj wizualnie ukryty dopisek — <span className="sr-only"> unread</span> — albo umieść liczbę w dostępnej nazwie linku.
• Kontrast. Warianty delikatne używają tekstu w stopniu 11 na wypełnieniach w stopniu 3, dla których paleta gwarantuje co najmniej 4,5:1 w obu trybach. Warianty pełne również osiągają 4,5:1.
• Ruch. Pulsowanie live jest dekoracyjne i wyłącza się przy prefers-reduced-motion.

Dokumentacja API#

Badge#

Renderuje <span>. Zbudowany na useRender z Base UI, więc przyjmuje prop render.

BadgeDot#

Kropka statusu o średnicy 6 px w kolorze tekstu odznaki.

badgeVariants#

Generator klas jest eksportowany, żeby inne elementy — komórka tabeli, własny link — mogły korzystać ze stylów odznaki.

import { badgeVariants } from "@/components/ui/badge"

<span className={badgeVariants({ variant: "info", size: "sm" })}>Beta</span>