> For the complete documentation index, see [llms.txt](https://docs.littlebaytech.com/templates/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.littlebaytech.com/templates/responsive-base-template/development-guides/pages-and-reusable-elements-organized-by-folder/3.-logged-in/profile/1.-follow-unfollow-the-user.md).

# 1. Follow/Unfollow the User

### 1. Follow/Unfollow the User

The profile page allows Users to view their own profile information, and the profile information of other Users in the application. &#x20;

#### The Follow/Unfollow Button on the Profile Page

When the Current User is viewing someone else's profile, the `Button Follow/Edit Profile` element is shown to the Current User:

![](/files/-LXblkalssQVZ3WF1Q9T)

When the `Button Follow/Edit Profile` element is shown, and the Current User isn't yet following the person whose profile they are viewing, the `Button Follow/Edit Profile` element's text will be "Follow":

![](/files/-LXblpKUKFMJQQD-Xk8P)

When the `Button Follow` element is clicked, the Current User is now following the person whose profile they are viewing. As a result, the button's text conditionally changes from "Follow" to "\[checkmark] Following".  &#x20;

![](/files/-LXbmXgZ87cTMPY4O4iH)

When the "\[checkmark] Following" text is hovered, its text will conditionally change to "Unfollow":

![](/files/-LXbsjTeGP-ibh_avXbs)

If the "Unfollow" text is clicked, the Current User will no longer be following the person whose profile they are viewing.

#### The Edit Profile Buttons on the Profile Page

When the Current User is viewing their own profile page, the `Button Follow/Edit Profile` element will be visible if the current page width is greater than 725 pixels; the button's text will be "Edit Profile". If the page width is less than or equal to 725 pixels, the `Button Edit Profile (Mobile)` element will be visible instead.

**Editor**&#x20;

Desktop:

![](/files/-LXbv39Rx5I_pLjRkbNe)

Mobile:

![](/files/-LXbv6UjaWgfB2iL8Tmi)

**Preview**

Desktop

![](/files/-LXbvAAJrNL4wZUZ1yzr)

Mobile

![](/files/-LXbvDtlsM6MIz4l-quM)

These buttons' texts are "\[pencil icon] Edit". When clicked, these buttons' workflows navigate the Current User to their account page, in order to edit their profile information.

![](/files/-LXbwypJovAZHbIJGcJu)

{% hint style="info" %}
More information on these workflows can be found in the **B. Follow/Unfollow** workflow folder.
{% endhint %}
