Przyciski to podstawowe komponenty, które umożliwiają użytkownikowi wywołanie określonego działania. Dostępnych jest 5 typów przycisków. W tabeli poniżej opisujemy wygląd każdego z 5 typów przycisków oraz podajemy, w jakich sytuacjach należy ich używać.

Typ	Wygląd	Cel
Wypełnienie	jednolite tło z tekstem o kontrastującym kolorze;	Przyciski o wysokiej mocy sygnału. Są one przeznaczone do podstawowych działań w aplikacji, takich jak „prześlij” i „zapisz”. Efekt cienia podkreśla znaczenie przycisku.
Tonalny wypełniony	Kolor tła zmienia się, aby dopasować się do powierzchni.	Również w przypadku działań głównych lub znaczących. Wypełnione przyciski mają większą wagę wizualną i są odpowiednie do funkcji takich jak „dodaj do koszyka” i „Zaloguj się”.
Podwyższona	wyróżnia się cieniem;	pełnią podobną funkcję co przyciski tonalne. Zwiększ wysokość, aby przycisk był jeszcze bardziej widoczny.
Kontur	zawiera obramowanie bez wypełnienia.	przyciski o średnim stopniu natężenia, które zawierają ważne, ale nie główne działania; Dobrze pasują do innych przycisków, aby wskazać alternatywne działania, takie jak „Anuluj” lub „Wstecz”.
Tekst	Wyświetla tekst bez tła ani obramowania.	przyciski o niskim stopniu natężenia, które są idealne do mniej ważnych działań, takich jak linki nawigacyjne lub funkcje dodatkowe, np. „Więcej informacji” czy „Wyświetl szczegóły”;

Ilustracja poniżej przedstawia 5 typów przycisków w Material Design.

Interfejs API

• onClick: funkcja wywoływana, gdy użytkownik naciśnie przycisk.
• enabled: jeśli ma wartość false, przycisk jest niedostępny i nieaktywny.
• colors: wystąpienie klasy ButtonColors, które określa kolory użyte w przycisku.
• contentPadding: wypełnienie przycisku.

Wypełniony przycisk

Komponent wypełnionego przycisku korzysta z podstawowego komponentu Button. Domyślnie jest ona wypełniona jednolitym kolorem. Ten fragment kodu pokazuje, jak zaimplementować komponent:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Ta implementacja wygląda tak:

Wypełniony przycisk tonalny

Wypełniony tonalny komponent przycisku używa komponentu FilledTonalButton. Domyślnie jest on wypełniony kolorem tonalnym.

Ten fragment kodu pokazuje, jak zaimplementować komponent:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Ta implementacja wygląda tak:

Przycisk z konturem

Zarysowany komponent przycisku używa komponentu OutlinedButton. Domyślnie jest wyświetlany jako zarys.

Ten fragment kodu pokazuje, jak zaimplementować komponent:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Ta implementacja wygląda tak:

Przycisk podniesiony

Komponent przycisku wyższego poziomu korzysta z komponentu ElevatedButton. Domyślnie ma cień, który odzwierciedla efekt wypukłości. Pamiętaj, że jest to w podstawie obrysowany przycisk z cieniem.

Ten fragment kodu pokazuje, jak zaimplementować komponent:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Ta implementacja wygląda tak:

Przycisk tekstowy

Komponent przycisku tekstowego korzysta z komponentu TextButton. Dopóki nie zostanie wciśnięty, będzie widoczny tylko jako tekst. Domyślnie nie ma jednolitej wypełnienia ani obrysu.

Ten fragment kodu pokazuje, jak zaimplementować komponent:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Ta implementacja wygląda tak:

Dodatkowe materiały

• Pływający przycisk polecenia
• Dokumentacja Material UI