Przyciski to podstawowe komponenty, które pozwalają użytkownikowi wywołać działania. Istnieje pięć rodzajów przycisków. W tej tabeli opisano wygląd każdego z pięciu przycisków oraz miejsca ich stosowania .

Typ	Wygląd	Cel
Wypełnienie	Jednolite tło z kontrastującym tekstem.	Przyciski z dużą wyróżnieniem. Służą one do wykonywania głównych działań w aplikacji, np. „prześlij”. i „zapisz”. Efekt cienia podkreśla znaczenie przycisku.
Tonal wypełniony	Kolor tła zmienia się w zależności od powierzchni.	Także w przypadku głównych lub ważnych działań. Wypełnione przyciski zapewniają bardziej wizualną widoczność funkcji, dzięki którym można dopasować wagę i rozmiar, np. „dodaj do koszyka”. i „Zaloguj się”.
Podwyższona	Wyróżnia się cieniem.	Pełni rolę podobną do przycisków tonalnych. Zwiększ wysokość, aby przycisk był jeszcze lepiej widoczny.
Kontur	Ma obramowanie bez wypełnienia.	Przyciski ze średnim naciskiem zawierające działania, które są ważne, ale nie są główne. Dobrze komponują się z innymi przyciskami, wskazując działania alternatywne, np. „Anuluj”. lub „Wstecz”.
Tekst	Wyświetla tekst bez tła i obramowania.	Przyciski z małym naciskiem, idealne do mniej ważnych działań, takich jak linki nawigacyjne lub korzystanie z funkcji drugorzędnych, takich jak „Więcej informacji”. lub „Wyświetl szczegóły”.

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

Interfejs API

• onClick: funkcja wywoływana, gdy użytkownik naciśnie przycisk.
• enabled: jeśli ma wartość false (fałsz), ten parametr powoduje wyświetlenie przycisku. niedostępne i nieaktywne.
• colors: wystąpienie ButtonColors, które określa kolory używane w: kliknij przycisk.
• contentPadding: dopełnienie w obrębie przycisku.

Wypełniony przycisk

Komponent przycisku wypełnionego używa podstawowego elementu kompozycyjnego Button. Jest jest domyślnie wypełnione jednolitym kolorem. Ten fragment kodu pokazuje, jak zaimplementuj komponent:

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

Implementacja wygląda tak:

Wypełniony przycisk tonalny

Komponent wypełnienia przycisku tonalnego używa funkcji kompozycyjnej FilledTonalButton. Domyślnie jest wypełniany kolorem tonalnym.

Ten fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Przycisk z konturem

Komponent przycisku z listą elementów wykorzystuje element kompozycyjny OutlinedButton. it jest domyślnie wyświetlany z obrysem.

Ten fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Przycisk podniesiony

Komponent przycisku podniesionego używa funkcji kompozycyjnej ElevatedButton. Zawiera cień, który domyślnie reprezentuje efekt wysokości. Pamiętaj, że jest to przycisk z obrysem i cieniem.

Ten fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Przycisk tekstowy

Komponent przycisku tekstowego używa funkcji kompozycyjnej TextButton. Dopóki nie naciśniesz przycisku, jest wyświetlany tylko jako tekst. Domyślnie nie ma wypełnienia ani konturów.

Ten fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Dodatkowe materiały

• Pływający przycisk polecenia
• Dokumentacja interfejsu Material Design