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.テキストボタン。

参考情報