Komponenty

Przyciski

Pięć wariantów, bo tyle ról naprawdę występuje w panelu. Szósty wariant zawsze kończy się tym, że nikt nie wie, którego użyć.

Warianty i rozmiary

ikona

Pięć wariantów, bo tyle ról naprawdę występuje: czynność główna, drugorzędna, cicha, nieodwracalna i odnośnik udający tekst. Trzy rozmiary.

Wariant	Kiedy	Kiedy nie	Ile na ekranie
Główny (fiolet)	Jedna czynność, o którą chodzi na tym ekranie: „Otwórz paszport”, „Zapisz protokół”, „Wczytaj arkusz”.	Do czynności, które nic nie zmieniają (anuluj, wróć). Do dwóch czynności naraz.	Jeden na widok, wyjątkowo jeden na kartę.
Drugorzędny (jasna mięta)	Czynność równorzędna, ale nie najważniejsza: „Historia wpisów” obok „Otwórz paszport” (brandbook s. 10).	Jako jedyny przycisk na ekranie; wtedy powinien być główny.	Do dwóch obok głównego.
Cichy (bez tła)	„Anuluj”, „Wróć”, „Drukuj”, czynności poboczne w pasku narzędzi.	Do czynności, które zapisują dane.	Bez limitu, ale każdy ma powód.
Niszczący (czerwień stanu „po terminie”)	Czynność nieodwracalna albo zmieniająca stan urządzenia: „Wycofaj z użytkowania”, „Usuń zaproszenie”.	Do „Odrzuć zgłoszenie”, bo to jest decyzja, nie zniszczenie; wtedy drugorzędny.	Jeden, z potwierdzeniem.
Odnośnik	Czynność wpleciona w zdanie albo w komórkę tabeli: „Pokaż wszystkie”, „Ustal reżim”.	Jako główny przycisk formularza.	Bez limitu.

Rozmiary: S (32 px) w komórce tabeli i w pasku filtrów, M (40 px) domyślnie, L (48 px) w stanie pustym i na stronie marketingowej. Wysokość taka sama jak pola w tym samym rozmiarze.
Narożnik 10 px (brandbook s. 10), wypełnienie poziome 16 px w M, ikona 20 px z lewej, odstęp 8 px między ikoną a słowem.
Etykieta to czasownik w trybie rozkazującym plus dopełnienie: „Dodaj urządzenie”, nie „Urządzenie” ani „OK”. Szczegóły w Języku marki.
Odnośnik wyglądający jak przycisk to <a> z klasami przycisku, nie <button> z przekierowaniem. Prawy klik i środkowy przycisk myszy mają działać.

spoczynek

najechanie

ognisko

wciśnięcie

wyłączony

Stany przycisku głównego i drugorzędnego. Najechanie, ognisko i wciśnięcie są tu wymuszone atrybutem, żeby dało się je obejrzeć bez myszy.

Stan	Główny	Drugorzędny	Uwaga
Spoczynek	fiolet, biel	jasna mięta, atrament	Kontrasty 5,92:1 i 15,31:1.
Najechanie	fiolet ciemny	turkus	Zmiana w 120 ms. Bez podnoszenia, bez cienia, bez powiększania.
Ognisko klawiatury	obrys 2 px fioletu, odstęp 3 px	to samo	Ten sam obrys dla wszystkiego, co da się kliknąć. Nie ukrywamy go dla myszy inaczej niż przez `:focus-visible`.
Wciśnięcie	fiolet ciemny	turkus	Bez przesunięcia w dół.
Wyłączony	krycie 50%, kursor „nie wolno”	to samo	Wyłączony przycisk zapisu to zwykle zły pomysł: lepiej pozwolić kliknąć i pokazać, czego brakuje.
W trakcie	etykieta zostaje, przycisk wyłączony	to samo	Nie zmieniamy etykiety na „Zapisywanie…”, bo zmiana szerokości przesuwa sąsiadów. Kółko ładowania po lewej zamiast ikony jest dopuszczalne.

Tab przenosi ognisko na przycisk, Enter i Spacja go uruchamiają. Odnośnik w kształcie przycisku uruchamia się tylko Enter, i to jest w porządku, bo jest odnośnikiem.
Przycisk ma zawsze widoczny tekst. Przycisk z samą ikoną dostaje aria-label z pełnym czasownikiem.
Aplikacja buduje przycisk na React Aria (react-aria-components), więc stan wciśnięcia, klawiatura i czytnik działają bez własnego kodu. To zostaje.