ボタンは、定義されたアクションをユーザーがトリガーできるようにするための基本コンポーネントです。ボタンは 5 種類あります。次の表に、5 種類のボタンのデザインと使用場所を示します。
タイプ |
デザイン |
目的 |
---|---|---|
塗りつぶし |
無地の背景と対照的なテキスト。 |
高強調ボタン。「送信」や「保存」など、アプリのメイン アクションに使用します。シャドウ効果では、ボタンの重要性が強調されます。 |
塗りつぶし色調 |
背景色はサーフェスに合わせて変化します。 |
主要なアクションや重要なアクションにも適用できます。塗りつぶしボタンは、「カートに追加」や「ログイン」などの機能に適した、より視覚的にわかりやすいものにします。 |
やや高い |
影を使って目立たせる。 |
色調ボタンと同様の役割を果たします。エレベーションを高くすると、ボタンがさらに目立つようになります。 |
枠線付き |
塗りつぶしのない枠線が表示されます。 |
中強調のボタン。重要ではあるものの、主要ではないアクションが含まれています。他のボタンと組み合わせることで、「キャンセル」や「戻る」などの代替のサブアクションを示すことができます。 |
テキスト |
背景も枠線もなしでテキストを表示します。 |
低強調ボタン。ナビゲーション リンクや、「詳細」や「詳細を表示」などのサブ機能など、重要性の低い操作に最適です。 |
次の図は、マテリアル デザインの 5 種類のボタンを示しています。
API サーフェス
onClick
: ユーザーがボタンを押したときに呼び出される関数。enabled
: false の場合、このパラメータを使用すると、ボタンが使用できず、無効であるように見えます。colors
: ボタンの色を決定するButtonColors
のインスタンス。contentPadding
: ボタン内のパディング。
塗りつぶしボタン
塗りつぶしボタン コンポーネントでは、基本的な Button
コンポーザブルを使用します。デフォルトでは単色で塗りつぶされます。次のスニペットは、コンポーネントを実装する方法を示しています。
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
これを実装すると次のようになります。
塗りつぶし色調ボタン
塗りつぶしの色調ボタン コンポーネントでは、FilledTonalButton
コンポーザブルを使用します。デフォルトでは色調で塗りつぶされます。
次のスニペットは、コンポーネントを実装する方法を示しています。
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
これを実装すると次のようになります。
枠線ボタン
枠線付きボタン コンポーネントでは、OutlinedButton
コンポーザブルを使用します。デフォルトでは、枠線が表示されます。
次のスニペットは、コンポーネントを実装する方法を示しています。
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
これを実装すると次のようになります。
浮き上がりボタン
立体ボタン コンポーネントでは、ElevatedButton
コンポーザブルを使用します。デフォルトで、高度効果を表すシャドウがあります。これは基本的に、影付きの枠線付きボタンです。
次のスニペットは、コンポーネントを実装する方法を示しています。
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
これを実装すると次のようになります。
テキストボタン
テキストボタン コンポーネントでは、TextButton
コンポーザブルを使用します。押すまでは、テキストとしてのみ表示されます。デフォルトでは、塗りつぶしや枠線は表示されません。
次のスニペットは、コンポーネントを実装する方法を示しています。
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
これを実装すると次のようになります。