Plakietka

Status i etykiety, nigdy interaktywne.

OpublikowanaSzkicKomplet17:30

Warianty

Cztery warianty, jeden kształt. Każdy wariant ma znaczenie, więc ten sam status wygląda tak samo w całym produkcie.

Opublikowana

secondary · Status aktywny, np. opublikowana oferta. Domyślny.

Szkic

outline · Status neutralny: szkic, archiwum, wkrótce.

Komplet

inverted · Ciemny, wyróżniony status, np. pełna grupa.

17:30

default · Ciemny z białym tekstem: godzina na karcie zajęć.

OpublikowanaSzkicKomplet17:30

Plakietki leżą na kartach (biel) tak samo często jak na liliowym tle strony.

Plakietka nie ma stanów interaktywnych: to etykieta, nie kontrolka. Zmienia się treść i wariant, wybrany według statusu, który pokazuje.

Opublikowana Wstrzymana Szkic Wkrótce

Status oferty w panelu organizatora: opublikowana, wstrzymana, szkic

Zwykły span z atrybutem data-variant; tekst przychodzi z tłumaczeń aplikacji.

Prop	Typ	Domyślnie	Opis
`variant`	`"secondary" \| "outline" \| "inverted" \| "default"`	`"secondary"`	Zestaw kolorów; kształt i rozmiar są takie same w każdym wariancie.
`children`	`tekst, opcjonalnie ikona 12 px`	–	Treść plakietki; ikonę przekazuje aplikacja.
`className`	`string`	–	Dodatkowe klasy, np. pozycja na karcie.

Span bez roli: czytnik czyta tekst w miejscu, jako część karty albo wiersza.
Nie przyjmuje fokusu i nie da się go kliknąć. Audyt design systemu wyłącza plakietki z reguły, że każda kontrolka ma widoczną ramkę, bo nie są kontrolkami.
Status niesie tekst, nie tylko kolor.
Kontrast: secondary 16,3:1, outline 18,3:1 na tle strony, inverted 14,2:1, default 20,2:1.

Nauka pływania dla początkującychOpublikowana

TakUżywaj plakietki do pokazania statusu obok rzeczy, którą opisuje.

Sport ✕ Sztuka ✕

NieNie rób z plakietki przycisku. Wybór, który użytkownik przełącza, to chip z ramką, hover i fokusem.