Schaltfläche

Buttons sind grundlegende Komponenten, mit denen Nutzer eine definierte Aktion auslösen können. Es gibt fünf Arten von Schaltflächen. In dieser Tabelle werden die fünf Schaltflächentypen und ihre Verwendung beschrieben:

Typ Darstellung Zweck
Ausgefüllt Einfarbiger Hintergrund mit kontrastierendem Text. Schaltflächen mit hoher Gewichtung. Sie sind für primäre Aktionen in einer Anwendung vorgesehen, z. B. „Senden“ und „Speichern“. Der Schatteneffekt hebt die Bedeutung der Schaltfläche hervor.
Ausgefüllt, Ton in Ton Die Hintergrundfarbe variiert je nach Oberfläche. Auch für primäre oder wichtige Aktionen. Ausgefüllte tonale Schaltflächen haben ein höheres visuelles Gewicht und eignen sich für Funktionen wie „In den Einkaufswagen“ und „Anmelden“.
Erhöht Hebt sich durch einen Schatten ab. Dienen einem ähnlichen Zweck wie Buttons mit Ton-in-Ton-Farben. Erhöhen Sie die Elevation, damit der Button noch deutlicher hervorgehoben wird.
Umrissen Mit einem Rahmen ohne Füllung. Schaltflächen mit mittlerer Gewichtung, die wichtige, aber nicht primäre Aktionen enthalten. Sie lassen sich gut mit anderen Buttons kombinieren, um alternative, sekundäre Aktionen wie „Abbrechen“ oder „Zurück“ anzugeben.
Text Zeigt Text ohne Hintergrund oder Rahmen an. Buttons mit geringer Betonung, ideal für weniger wichtige Aktionen wie Navigationslinks oder sekundäre Funktionen wie „Weitere Informationen“ oder „Details ansehen“.

Dieses Bild zeigt die fünf Arten von Schaltflächen in Material Design:

Ein Beispiel für jede der fünf Schaltflächenkomponenten, wobei die jeweiligen Merkmale hervorgehoben sind.
Abbildung 1. Die fünf Button-Komponenten.

API-Oberfläche

onClick
Die Funktion, die das System aufruft, wenn der Nutzer die Taste drückt.
enabled
Wenn false, wird die Schaltfläche als nicht verfügbar und inaktiv angezeigt.
colors
Eine Instanz von ButtonColors, die die Farben des Buttons bestimmt.
contentPadding
Das Padding innerhalb der Schaltfläche.

Schaltfläche mit Füllung

Die Komponente für ausgefüllte Schaltflächen verwendet die einfache zusammensetzbare Funktion Button. Standardmäßig ist es mit einer Volltonfarbe gefüllt. Das Snippet zeigt, wie die Komponente implementiert und interaktiv in der Vorschau angezeigt wird:

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

Schaltfläche mit Füllung und Farbton

Die Komponente für ausgefüllte tonale Schaltflächen verwendet die zusammensetzbare Funktion FilledTonalButton. Standardmäßig wird es mit einer tonalen Farbe gefüllt.

Das Snippet zeigt, wie die Komponente implementiert und interaktiv in der Vorschau angezeigt wird:

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

Button mit Umriss

Die Komponente für umrandete Schaltflächen verwendet die zusammensetzbare Funktion OutlinedButton. Es wird standardmäßig mit einem Umriss angezeigt.

Das Snippet zeigt, wie die Komponente implementiert und interaktiv in der Vorschau angezeigt wird:

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

Erhöhte Schaltfläche

Die Komponente für erhöhte Schaltflächen verwendet das Compose-Element ElevatedButton. Es hat standardmäßig einen Schatten, der den Erhöhungseffekt darstellt. Es ist eine Schaltfläche mit Füllung und Schatten.

Das Snippet zeigt, wie die Komponente implementiert und interaktiv in der Vorschau angezeigt wird:

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

Button „Text“

Für die Textschaltflächenkomponente wird die zusammensetzbare Funktion TextButton verwendet. Sie wird nur als Text angezeigt, bis sie gedrückt wird. Sie hat standardmäßig keine durchgehende Füllung oder Umrandung.

Das Snippet zeigt, wie die Komponente implementiert und interaktiv in der Vorschau angezeigt wird:

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

Zusätzliche Ressourcen