---
schema_version: "1"
id: 1ac94040049fcdfaad6a5ef56910c1b9144273027ce99be053b2590e2cb75767
title: Follow Button
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_user_profile_follow_button_napili.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_user_profile_follow_button_napili.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: ed7a1a99be7e91aa91756295825beda2c6ad4266caa04804d89c9e9619062cbe
description: The Follow Button component lets users follow topics, articles, and other users.
products:
  - Experiences
release: "264"
---
# Follow Button

The Follow Button component lets users follow topics, articles, and other users.

In the Page Editor, you can configure the follow button component on the User Profile, Article Detail, and Topic Detail pages. This component lets users follow other users, articles, or topics. When a user views their own profile, the button isn’t visible because users can’t follow themselves.

Each button instance supports its own property values. So, if you have two Follow buttons on a page, the values on each button are unique to that button. You can configure buttons to use the values you defined in your theme so that they all look the same. But each button instance remains unique.

1. Select the **Follow Button** component in the 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="d33687e64">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d33687e67">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d33687e64 ">
                  <samp class="parmname">Followed Record ID</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d33687e67 ">The system supplies this value. Don’t update this
                  field.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d33687e64 ">
                  <samp class="parmname">Allow email notifications on
                    topics</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d33687e67 ">Select to let user’s receive email notifications for
                  topic activity.</td>

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d33687e67 ">
                  <p>Set the color of text that’s used for the button
                    label.</p>
                  <p style="margin-bottom:0;">The <span style="vertical-align:text-bottom;display:inline-block;"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/linked_to_theme.png" alt="Linked to Theme icon"></span> link icon shows that
                    the current selection comes from colors defined in the
                    theme.</p>
                </td>

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d33687e67 ">
                  <p>Set the color of text that’s used for the button label
                    when a member mouses over the button.</p>
                  <p style="margin-bottom:0;">In Builder, you can
                    test your hover color in Preview mode.</p>
                </td>

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d33687e67 ">Set the color to use for the button background when the
                  button is inactive.</td>

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d33687e67 ">
                  <p>Set the color to use for the button background when a
                    member mouses over the button.</p>
                  <p style="margin-bottom:0;">In Builder, you can test
                    your hover color in Preview mode.</p>
                </td>

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d33687e67 ">Set the color to use for the border that surrounds the
                  button.</td>

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d33687e67 ">Move the slider to control the amount of curve to use for
                  the button shape.</td>

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d33687e67 ">Move the slider to control the width of the button. Width
                  percentage is set against the full width of the container
                  the button sits in. So 100% is the full width of the
                  container, rather than the full width of the browser
                  page.</td>

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

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d33687e67 ">To set the horizontal alignment of a button within its
                  container, select <kbd>Center</kbd>,
                  <kbd>Left</kbd>, or
                  <kbd>Right</kbd>.
                </td>

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

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_example.png)

Example ![Follow button](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/follow_button.png)

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_note.png)

Note Turn on Feed Tracking for each article type you want members to follow.

#### See Also

- [Which Components Can I Use with Each Aura Template?](https://help.salesforce.com/s/articleView?id=experience.rss_component_reference_table.htm&release=264.0.0&type=5 "Aura site templates, such as Customer Service and Partner Central, are each composed of pages, which in turn are made up of customizable components. Consult this table to find out which Aura template each component can be used in, and when the component became available.")