---
schema_version: "1"
id: 92af0a9829741515fab1d3a73589b4e91122019f81cf7a1507ce04ceeb0c0cee
title: Biometric Login Button
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_login_biometric.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_login_biometric.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: d196da2f0ce91490a6d187455d942e5424dd1de5c0b20cf38aff4ee45d2c0805
description: The Biometric Login Button component triggers the login prompt for face or fingerprint recognition on a mobile app.
products:
  - Experiences
release: "264"
---
# Biometric Login Button

The Biometric Login Button component triggers the login prompt for face or fingerprint recognition on a mobile app.

This component is supported only on the app login page of Mobile Publisher for Experience Cloud apps configured with [User Opt-In Biometric Login](https://help.salesforce.com/s/articleView?language=en_US&id=sf.branded_apps_exp_opt_in_biometric_login.htm&type=5).

1. Select the Biometric Login Button component on the app login page you’re configuring.
2. In the property editor, configure the properties for the component.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:28.000000000000004%">
              <col style="width:72%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d78622e56">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d78622e59">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e56 ">
                  <samp class="parmname">Button Label</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e59 ">
                  <p>Enter the text to display on the button that app users tap to trigger the
                    login prompt for face or fingerprint credentials. </p>
                  <p style="margin-bottom:0;">The default text is <code>Log In with Biometrics</code>.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e56 ">
                  <samp class="parmname">Button Text Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e59 ">Set the text color of the button label. </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e56 ">
                  <samp class="parmname">Button Background Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e59 ">Set the background color of the button. </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e56 ">
                  <samp class="parmname">Button Border Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e59 ">Set the button border color. </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e56 ">
                  <samp class="parmname">Button Border Radius</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e59 ">Move the slider to configure the curve of the button’s shape. </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e56 ">
                  <samp class="parmname">Max Button Width</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e59 ">Move the slider to configure the width of the button. The width percentage
                  corresponds to the width of the container that the button is placed in. For
                  example, a button at 50% width is half as wide as the container that it’s placed
                  in. </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e56 ">
                  <samp class="parmname">Button Alignment</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d78622e59 ">Select <code>Left</code>, <code>Right</code> or
                  <code>Center</code> to position the button within the container it’s
                  placed in.
                </td>

              </tr>
            </tbody>
          </table>