ボタン

ボタンは、定義されたアクションをユーザーがトリガーできるようにするための基本コンポーネントです。ボタンは 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 のドキュメント