ボタン

ボタンは、ユーザーが定義されたアクションをトリガーできるようにする基本的なコンポーネントです。ボタンには 5 種類あります。次の表に、5 種類のボタンの外観と、使用する場所を示します。

この画像は、マテリアル デザインの 5 種類のボタンを示しています。

API サーフェス

onClick

ユーザーがボタンを押したときにシステムが呼び出す関数。

enabled

When false, このパラメータによりボタンが使用不可で 非アクティブになります。

colors

ボタンで使用する色を決定する ButtonColors のインスタンス。

contentPadding

ボタン内のパディング。

塗りつぶしボタン

塗りつぶしボタン コンポーネントは、基本的な Button コンポーザブルを使用します。デフォルトでは単色で塗りつぶされます。次のスニペットは、このコンポーネントを実装する方法を示しています。

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

この実装は次のように表示されます。

塗りつぶし（トーン）ボタン

塗りつぶし（トーン）ボタン コンポーネントは、FilledTonalButton コンポーザブルを使用します。 デフォルトではトーンカラーで塗りつぶされます。

次のスニペットは、このコンポーネントを実装する方法を示しています。

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

この実装は次のように表示されます。

アウトライン ボタン

アウトライン ボタン コンポーネントは、OutlinedButton コンポーザブルを使用します。デフォルトではアウトラインが表示されます。

次のスニペットは、このコンポーネントを実装する方法を示しています。

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

この実装は次のように表示されます。

浮き上がりボタン

浮き上がりボタン コンポーネントは、ElevatedButton コンポーザブルを使用します。デフォルトでは、浮き上がり効果を表すシャドウが付いています。シャドウを含む塗りつぶしボタンです。

次のスニペットは、このコンポーネントを実装する方法を示しています。

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

この実装は次のように表示されます。

テキストボタン

テキストボタン コンポーネントは、TextButton コンポーザブルを使用します。押されるまでテキストのみが表示されます。デフォルトでは、単色の塗りつぶしやアウトラインはありません。

次のスニペットは、このコンポーネントを実装する方法を示しています。

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

この実装は次のように表示されます。

参考情報

• フローティング アクション ボタン
• マテリアル デザイン 3 のボタンの概要