Skip to main content
Docs

UserButton

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

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

Important

The UserButton only appears when a user is signed in.

Usage

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

Basic usage

struct HomeView: View {
  @Environment(\.clerk) private var clerk

  var body: some View {
    ZStack {
      if clerk.user != nil {
        UserButton()
          .frame(width: 36, height: 36)
      }
    }
  }
}
struct ContentView: View {
  @Environment(\.clerk) private var clerk

  var body: some View {
    NavigationView {
      VStack {
        Text("Welcome!")
      }
      .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
          if clerk.user != nil {
            UserButton()
              .frame(width: 36, height: 36)
          }
        }
      }
    }
  }
}

Customization

To learn how to customize Clerk iOS components, see the .

If Clerk's prebuilt components 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?

Last updated on