Button

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

タイプ

デザイン

目的

塗りつぶし

背景が無地で、テキストのコントラストが高い。

高強調ボタン。これらは、アプリのプライマリ アクション(「送信」や「保存」など)に使用されます。シャドウ効果でボタンの重要性が強調されます。

塗りつぶしの色調

サーフェスに合わせて背景色が変わります。

主要なアクションや重要なアクションにも使用できます。塗りつぶしボタンは視覚的に目立つようにし、「カートに追加」などの機能に適している[ログイン] をタップします。

やや高い

シャドウが付いているため目立ちます。

色調ボタンと同様の役割を果たします。ボタンを目立たせるために、エレベーションを増やします。

枠線付き

塗りつぶしなしの枠線を表示します。

中強調ボタン: 重要だがプライマリではないアクションが含まれます。他のボタンと組み合わせて、「キャンセル」などの二次的なアクションを示すことができますまたは [戻る] をタップします。

テキスト

背景や枠線のないテキストを表示します。

強調度の低いボタン。ナビゲーション リンクなどの重要度の低いアクションや、[詳細] や [詳細を表示] などの副次的な機能に適しています。

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

5 つのボタン コンポーネントの例と、それぞれの特徴をハイライト表示しています。
図 1. 5 つのボタン コンポーネント。

API サーフェス

  • onClick: ユーザーがボタンを押すと呼び出される関数。
  • enabled: false の場合、このパラメータによりボタンが表示されます。 非アクティブな状態です
  • colors: ボタンで使用される色を決定する ButtonColors のインスタンス。
  • contentPadding: ボタン内のパディング。

塗りつぶしボタン

塗りつぶしボタン コンポーネントは、基本的な Button コンポーザブルを使用します。デフォルトでは単色で塗りつぶされます。次のスニペットは、 コンポーネントを実装します。

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}

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

<ph type="x-smartling-placeholder">
</ph> 紫色の背景に「filled」と書かれた塗りつぶしボタン。
図 2.塗りつぶしボタン。

塗りつぶしトーンボタン

塗りつぶしの色調ボタン コンポーネントは、FilledTonalButton コンポーザブルを使用します。 デフォルトでは、色調の色で塗りつぶされます。

次のスニペットは、コンポーネントの実装方法を示しています。

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}

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

<ph type="x-smartling-placeholder">
</ph> 薄紫色の背景に「filled」と書かれたトーン ボタン。
図 3.色調ボタン。

アウトライン ボタン

枠線付きボタン コンポーネントは、OutlinedButton コンポーザブルを使用します。これは、 デフォルトでは枠線付きで表示されます。

次のスニペットは、このコンポーネントの実装方法を示しています。

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}

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

暗い枠線に「枠線」と表示された透明な枠線付きボタン。
図 4. アウトライン ボタン。

浮き上がりボタン

エレベートされたボタン コンポーネントは、ElevatedButton コンポーザブルを使用します。機能 デフォルトで高度効果を表すシャドウ。これは、 枠線付きのボタンのような形です。

次のスニペットは、このコンポーネントの実装方法を示しています。

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}

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

<ph type="x-smartling-placeholder">
</ph> グレーの背景に「高度」と書かれた、浮き上がったボタン。
図 5.立体的なボタン。

テキストボタン

テキストボタン コンポーネントでは、TextButton コンポーザブルを使用します。このボタンを押すまで、 テキストのみで表示されます。デフォルトでは、塗りつぶしや輪郭線はありません。

次のスニペットは、このコンポーネントの実装方法を示しています。

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}

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

<ph type="x-smartling-placeholder">
</ph> 「テキストボタン」と書かれたテキストボタン
図 6.テキストボタン。

参考情報