Przycisk

Przyciski to podstawowe komponenty, które umożliwiają użytkownikowi uruchomienie zdefiniowanego działania. Istnieje 5 rodzajów przycisków. W tej tabeli opisujemy wygląd każdego z 5 typów przycisków oraz miejsca, w których należy ich używać:

Typ Wygląd Cel
Wypełniony Jednolite tło z kontrastującym tekstem. Przycisk o wysokim kontraście. Jest przeznaczony do realizacji głównych działań w aplikacji, takich jak „Prześlij” i „Zapisz”. Efekt cienia podkreśla znaczenie przycisku.
Wypełniony tonalny Kolor tła zmienia się w zależności od powierzchni. Przeznaczony do działań głównych lub istotnych. Wypełniony przycisk tonalny oferuje większą równowagę wizualną i jest odpowiedni do funkcji takich jak „Dodaj do koszyka” czy „Zaloguj się”.
Podniesiony Wyróżnia się cieniem. Pełni podobną funkcję jak przyciski tonalne. Zwiększ efekt podniesienia, aby przycisk był jeszcze bardziej widoczny.
Kontur Ma obramowanie bez wypełnienia. Przycisk o średnim znaczeniu, który zawiera ważne, ale nie główne działania. Dobrze komponuje się z innymi przyciskami, wskazując alternatywne działania dodatkowe, takie jak „Anuluj” czy „Wstecz”.
Tekst Wyświetla tekst bez tła ani obramowania. Przycisk o niskim kontraście, idealny do mniej istotnych działań, takich jak linki nawigacyjne czy funkcje dodatkowe, np. „Więcej informacji” lub „Wyświetl szczegóły”.

Ilustracja przedstawiająca 5 rodzajów przycisków w Material Design:

Przykłady każdego z 5 komponentów przycisków z wyróżnionymi unikalnymi cechami.
Rysunek 1. 5 komponentów przycisków.

Powierzchnia interfejsu API

onClick
Funkcja wywoływana przez system, gdy użytkownik naciśnie przycisk.
enabled
W przypadku wartości false parametr sprawia, że przycisk jest niedostępny i nieaktywny.
colors
Instancja ButtonColors określa kolory przycisku.
contentPadding
Odstęp w przycisku.

Wypełniony przycisk

Komponent wypełnionego przycisku korzysta z podstawowej funkcji kompozycyjnej Button. Domyślnie jest wypełniony jednolitym kolorem. Fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Wypełniony przycisk z fioletowym tłem z napisem „Wypełniony”.
Rysunek 2. Wypełniony przycisk.

Wypełniony przycisk tonalny

Komponent wypełnionego przycisku tonalnego korzysta z funkcji kompozycyjnej FilledTonalButton. Domyślnie jest wypełniony kolorem tonalnym.

Fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Przycisk tonalny z jasnofioletowym tłem z napisem „Tonalny”.
Rysunek 3. Przycisk tonalny.

Przycisk z konturem

Komponent przycisku z konturem korzysta z funkcji kompozycyjnej OutlinedButton. Domyślnie jest otoczony konturem.

Fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Przezroczysty przycisk z ciemnym konturem i napisem „Z konturem”.
Rysunek 4. Przycisk z konturem.

Przycisk podniesiony

Komponent przycisku podniesionego korzysta z funkcji kompozycyjnej ElevatedButton. Domyślnie ma cień, który symuluje efekt podniesienia. Jest to wypełniony przycisk z cieniem.

Fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Przycisk podniesiony z szarym tłem i napisem „Podniesiony”.
Rysunek 5. Przycisk podniesiony.

Przycisk tekstowy

Komponent przycisku tekstowego korzysta z funkcji kompozycyjnej TextButton. Do momentu naciśnięcia przycisk jest widoczny tylko jako tekst. Domyślnie nie ma wypełnienia ani konturu.

Fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Przycisk tekstowy z napisem „Przycisk tekstowy”
Rysunek 6. Przycisk tekstowy.

Dodatkowe materiały