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")
    }
}

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

「filled」と書かれた紫色の背景の塗りつぶしボタン。
図 2.塗りつぶしボタン。

塗りつぶしの色調ボタン

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

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

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

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

薄紫色の背景に「filled」と書かれたトーン ボタン。
図 3. 色調ボタン。

枠線付きボタン

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

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

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

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

「Outlined」と書かれた暗い枠線付きの透明な輪郭付きボタン。
図 4.アウトライン ボタン。

浮き上がりボタン

浮き上がりボタン コンポーネントは ElevatedButton コンポーザブルを使用します。デフォルトでは、高さ効果を表す影が付いています。これは基本的に、影付きの枠線付きボタンです。

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

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

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

背景がグレーで「Elevated」と書かれたエレベート ボタン。
図 5. 浮き上がりボタン。

テキストボタン

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

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

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

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

「テキスト ボタン」と書かれたテキスト ボタン
図 6. テキストボタン。

参考情報