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 zależności od stanu 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 umiejscowienie

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;

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żywać przycisku jako statycznego elementu dekoracyjnego;

Anatomia

Domyślny

1. Włączono: stan domyślny. 2. Najedź kursorem 3. Kliknij

Duży

1. Włączono: stan domyślny. 2. Najedź kursorem 3. Kliknij

Dostosowywanie

Przyciski mają domyślny i duży wariant, a każdy z nich ma stan domyślny, aktywny i naciśnięty. Ikony mogą służyć do podkreślania, wyjaśniania i rozpoznawania przycisku. Rozmiar przycisku może podkreślać jego znaczenie.

Domyślny

Właściwości	Dostosowywanie	Domyślne
Kształt	Tak	Duża, okrągła
Dopełnienie	Tak	16 dp, 8 dp
Obramowanie	Tak	2 dp, #606460
Tekst	Tak	Body Small
Ikona główna	Tak	40 dp
Ikona na końcu	Tak	40 dp
Rozmiar	Tak	Minimalna wysokość 56 dp
Głębokość	Tak	0

Duży

Właściwości	Dostosowywanie	Domyślne
Kształt	Tak	Duża, okrągła
Dopełnienie	Tak	20 dp, 8 dp
Obramowanie	Tak	2 dp, #606460
Tekst	Tak	Body Small
Ikona główna	Tak	56 dp
Ikona na końcu	Tak	56 dp
Rozmiar	Tak	Minimalna wysokość: 72 dp
Głębokość	Tak	0
Powierzchnia	Nie