Przyciski

Przyciski są głównym wizualnym wskaźnikiem działań użytkownika.

Zasady

Zorientowane na działanie: przyciski powinny jasno informować, że wywołują działanie.

Wyraźne informacje zwrotne: wygląd przycisku musi się wyraźnie zmieniać w różnych stanach interakcji (najechanie kursorem, kliknięcie, fokus), aby zapewnić natychmiastowe informacje zwrotne.

Spójność: wszystkie przyciski powinny mieć wspólny język wizualny, aby były od razu rozpoznawalne.

Elastyczny: komponent przycisku powinien obsługiwać typowe warianty, takie jak ikony i różne rozmiary, bez utraty spójności.

Użycie i umieszczenie

Przycisk powinien znajdować się blisko powiązanych z nim treści. Można je umieszczać samodzielnie lub z innymi komponentami, takimi jak karty i listy.

check_circle

Tak

Używaj stopniowego ujawniania, aby pokazywać mniej istotne działania.

cancel

Nie

przesłaniać widoku użytkownika zbyt dużą liczbą przycisków; Zamiast tego użyj grupy przycisków.

check_circle

Tak

Używaj przycisków, aby zachęcać do działania. Możesz też użyć elementu z tytułem w przypadku elementu statycznego.

cancel

Nie

Używaj przycisku jako statycznego elementu dekoracyjnego.

Przyciski ikon

Dostępne są przyciski z ikonami, które zmniejszają gęstość treści. Używaj przycisków z ikonami, gdy ikona wyraźnie ilustruje działanie. W przeciwnym razie dodaj etykietę przycisku.

check_circle

Tak

Używaj przycisku z ikoną w przypadku typowych, łatwo rozpoznawalnych działań.

cancel

Nie

W przypadku bardzo mało znanych działań używaj przycisku z ikoną.

Toggable

W przypadku działań ze stanami logicznymi, takich jak dodawanie do ulubionych, dla każdego typu przycisku dostępny jest wariant przełącznika. Zamiana ikon między stanami przełącznika sprawia, że interakcja jest szybka i reaguje na działania użytkownika.

check_circle

Tak

Jeśli dla danej czynności są dostępne opcje logiczne, użyj przycisku przełączania. np. rozpoczęcie/zatrzymanie.

cancel

Nie

Używaj przycisku przełączania w przypadku działań, które nie są binarne.

Anatomia

Przyciski składają się z etykiety i opcjonalnej ikony na początku lub na końcu.

Przyciski z ikonami składają się tylko z rozpoznawalnej ikony.

Oba mają wariant, który można włączać i wyłączać.

Dostosowywanie

Przyciski mają styl domyślny i duży. Duży rozmiar może podkreślić znaczenie.

Ikony mogą służyć do podkreślania, wyjaśniania i wyróżniania przycisku w pozycji końcowej lub początkowej.