āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/components/user/user-button.ios ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
title: 'UserButton'
description: Clerk's UserButton component renders a circular button that displays the current user's profile image and opens the user profile when tapped.
sdk: ios
The UserButton component is a circular button that displays the signed-in user's profile image. When tapped, it presents a sheet with the UserProfileView.
[!IMPORTANT] The
UserButtononly 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)
}
}
}
}
In a navigation toolbar
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
<Include src="_partials/ios/customization" />ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā