Button
ボタンは、ユーザーが定義されたアクションをトリガーできるようにする基本的なコンポーネントです。ボタンは 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") } }
これを実装すると次のようになります。