Skip to main content
Docs

UserButton

The UserButton is a circular button that displays the signed-in user's profile image.

The UserButton is a circular button that displays the signed-in user's profile image. When tapped, it presents a sheet with the UserProfileView.

Important

The UserButton only appears when a user is signed in.

Parameters

  • Name
    clerkTheme
    Type
    ClerkTheme
    Description

    The theme to apply to the UserButton. This will override any theme applied to the UserButton's parent view, or configured in the Clerk global object.

Usage

The following examples show how to use the UserButton in your app.

Basic usage

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.clerk.api.Clerk
import com.clerk.ui.userbutton.UserButton

@Composable
fun HomeScreen() {
    val user by Clerk.userFlow.collectAsStateWithLifecycle()
    if (user != null) {
        UserButton()
    }
}

In a navigation toolbar

import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.clerk.api.Clerk
import com.clerk.ui.userbutton.UserButton


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun UserProfileTopBar() {
    val user by Clerk.userFlow.collectAsStateWithLifecycle()
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Home screen") }, actions = { user?.let { UserButton() } })
        }
    ) {
        // Content goes here
    }
}

Customization

To learn how to customize Clerk views, see the dedicated guide.

If Clerk's prebuilt views don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the custom flow guides.

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on