ボタンは、定義された操作をユーザーがトリガーできるようにする基本コンポーネントです。ボタンは 5 種類あります。次の表に、5 種類のボタンの外観と使用する場所を示します。
種類 |
デザイン |
目的 |
---|---|---|
塗りつぶし |
テキストにコントラストの強い無地の背景。 |
高強調ボタン。これらは、[submit] や [save] など、アプリケーションでの主なアクションに使用します。シャドウ効果でボタンの重要性が強調されます。 |
塗りつぶしの色調 |
サーフェスに合わせて背景色が変わります。 |
主要なアクションや重要なアクションにも使用できます。塗りつぶしボタンは視覚的に目立つようにし、「カートに追加」や「ログイン」などの機能に適しています。 |
やや高い |
影を付けることで目立ちます。 |
色調ボタンと同様の役割を果たします。エレベーションを大きくすると、ボタンがより目立つようになります。 |
枠線付き |
塗りつぶしなしの枠線を表示します。 |
中強調のボタン。重要なアクションが含まれていますが、主要アクションではありません。他のボタンと組み合わせて、「キャンセル」や「戻る」などの二次的な操作を示すことができます。 |
テキスト |
背景や枠線のないテキストを表示します。 |
低強調のボタン。ナビゲーション リンクなどの重要度の低い操作や、「さらに詳しく」や「詳細を表示」などの二次的機能に最適です。 |
次の図は、マテリアル デザインの 5 種類のボタンを示しています。
API サーフェス
onClick
: ユーザーがボタンを押すと呼び出される関数。enabled
: false の場合、このパラメータによりボタンは使用不可または非アクティブと表示されます。colors
: ボタンで使用される色を決定するButtonColors
のインスタンス。contentPadding
: ボタン内のパディング。
塗りつぶしボタン
塗りつぶしボタン コンポーネントは、基本的な Button
コンポーザブルを使用します。デフォルトでは単色で塗りつぶされます。次のスニペットは、このコンポーネントの実装方法を示しています。
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
これを実装すると次のようになります。
![紫色の背景に「塗りつぶされた」と書かれた、塗りつぶされたボタン。](https://developer.android.com/static/develop/ui/compose/images/components/button-filled.png?authuser=0&hl=ja)
塗りつぶしの色調ボタン
塗りつぶしの色調ボタン コンポーネントは、FilledTonalButton
コンポーザブルを使用します。デフォルトでは色調で塗りつぶされます。
次のスニペットは、このコンポーネントの実装方法を示しています。
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
これを実装すると次のようになります。
![「塗りつぶし」と書かれた薄紫の背景の色調ボタン。](https://developer.android.com/static/develop/ui/compose/images/components/button-tonal.png?authuser=0&hl=ja)
枠線付きボタン
枠線付きボタン コンポーネントは、OutlinedButton
コンポーザブルを使用します。デフォルトでは、枠線付きで表示されます。
次のスニペットは、このコンポーネントの実装方法を示しています。
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
これを実装すると次のようになります。
![「枠線」と書かれた濃い枠線付きの透明な枠線付きボタン。](https://developer.android.com/static/develop/ui/compose/images/components/button-outlined.png?authuser=0&hl=ja)
立体ボタン
浮き上がりボタン コンポーネントは ElevatedButton
コンポーザブルを使用します。デフォルトでは、エレベーション効果を表すシャドウが描かれています。これは基本的に、影付きの枠線付きボタンです。
次のスニペットは、このコンポーネントの実装方法を示しています。
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
これを実装すると次のようになります。
![グレーの背景に「高度」と書かれた、浮き上がったボタン。](https://developer.android.com/static/develop/ui/compose/images/components/button-elevated.png?authuser=0&hl=ja)
テキストボタン
テキストボタン コンポーネントでは、TextButton
コンポーザブルを使用します。押されるまで、テキストのみが表示されます。デフォルトでは、無地の塗りつぶしや枠線はありません。
次のスニペットは、このコンポーネントの実装方法を示しています。
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
これを実装すると次のようになります。
![「テキストボタン」と書かれたテキストボタン](https://developer.android.com/static/develop/ui/compose/images/components/button-text.png?authuser=0&hl=ja)