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

タイプ	デザイン	目的
塗りつぶし	背景が単色で、テキストのコントラストが高い。	高強調ボタン。これらは、アプリのプライマリ アクション（「送信」や「保存」など）に使用されます。影のエフェクトにより、ボタンの重要性が強調されます。
塗りつぶし（明暗）	背景色はサーフェスに合わせて変化します。	メイン アクションや重要なアクションの場合も同様です。塗りつぶしボタンは視覚的な重みがあり、「カートに追加」や「ログイン」などの機能に適しています。
やや高い	シャドウが付いているため目立ちます。	トーンボタンと同様の役割を果たします。ボタンを目立たせるために、エレベーションを増やします。
枠線付き	塗りつぶしのない枠線が付いています。	中強調ボタン: 重要だがプライマリではないアクションが含まれます。他のボタンと組み合わせて、[キャンセル] や [戻る] などの代替のサブアクションを提示します。
テキスト	背景や枠線のないテキストを表示します。	強調度の低いボタン: ナビゲーション リンクなどの重要度の低いアクションや、[詳細] や [詳細を表示] などの副次的な機能に適しています。

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

API サーフェス

• onClick: ユーザーがボタンを押したときに呼び出される関数。
• enabled: 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

これを実装すると次のようになります。

参考情報

• フローティング アクション ボタン
• マテリアル UI のドキュメント