User Profile

The user profile shows a sign-in button when signed out, or an avatar that opens a popover with the user's details, links, and sign-out action when signed in.

Overview

The user profile displays a user’s authentication state in an application. Signed out, it shows a sign-in button. Signed in, it shows the user’s avatar, which opens a popover with their name, email, profile links, an optional theme toggle, and a sign-out action. It’s typically placed at the end of an app bar.

Usage

forge-user-profile is signed in when full-name is set and signed out when it’s empty. Set full-name, email, and image-url for the signed-in state; the avatar falls back to the user’s initials when there’s no image. Add forge-profile-link elements in the link slot for navigation like settings or account pages, each wrapping an <a> and an optional icon. Set theme-toggle to let users choose a light, dark, or system theme, and call setTheme() to change it from code. Handle forge-user-profile-sign-in and forge-user-profile-sign-out to run your authentication logic, and use the sign-in-button-text, sign-out-button-text, and theme-toggle-* slots to customize or localize text. Use open to control the popover. It’s meant for the app bar’s end slot; for other account menus, build one with a menu or popover.

Rules

Place it in the end slot of the app bar.

Set full-name only when a user is signed in, and clear it on sign out.

Handle forge-user-profile-sign-in and forge-user-profile-sign-out to update your authentication state.

Wrap each link in a forge-profile-link in the link slot.

Set button-label to describe the avatar button for the current user.

Don't

Don't implement sign-in or sign-out inside the component; it only dispatches events.

Don't add actions to the link slot that aren't navigation, like destructive commands.

Don't use it outside an app bar without checking that its app bar styling works in that context.

Basic usage

A user profile in an app bar with profile links and a theme toggle.

A signed-in user profile in an app bar, with profile links, a theme toggle, and a sign out button in its popover.

Displays user authentication state within an application, showing a sign-in button when signed out, or an avatar button that opens a popover with the user's info, links, and sign-out action when signed in.

import "@tylertech/forge/user-profile";

Properties

Property	Attribute	Type	Default	Description
`fullName`	—	`string`	`''`	The full name of the user.
`email`	—	`string`	`''`	The email address of the user.
`imageUrl`	—	`string`	`''`	The image URL for the user avatar.
`buttonLabel`	—	`string`	`'Open user profile'`	ARIA label for the user profile avatar button.
`themeToggle`	—	`boolean`	`false`	Indicates whether the theme toggle is visible.
`themeToggleAriaLabel`	—	`string`	`'Select a theme'`	ARIA label for the theme toggle button group.
`open`	—	`boolean`	`false`	Controls whether the user profile popover is open.

Events

Name	Type	Description
`forge-user-profile-sign-in`	`Event`	Fired when the sign in button is clicked.
`forge-user-profile-sign-out`	`Event`	Fired when the sign out button is clicked.

Slots

Name	Description
`link`	Slot for additional profile navigation links
`sign-in-button-text`	Slot for the sign in button text
`sign-out-button-text`	Slot for the sign out button text
`theme-toggle-title`	Slot for the theme toggle's title text
`theme-toggle-light-label`	Slot for the theme toggle's light theme option text
`theme-toggle-dark-label`	Slot for the theme toggle's dark theme option text
`theme-toggle-system-label`	Slot for the theme toggle's system theme option text

Methods

Name	Returns	Description
`setTheme(value)`	`void`	Sets the current theme. Applies immediately even if the theme toggle is not rendered.

Labeling

The signed-in avatar button is icon-only, so it gets its accessible name from button-label, which defaults to “Open user profile”. Set it to something specific for your app, and localize it. The theme toggle’s button group is named by theme-toggle-aria-label, which defaults to “Select a theme”.

Give each link in a forge-profile-link descriptive text in its <a>. Icons in the icon slot are decorative.

Keyboard interaction

The avatar button, or the sign-in button when signed out, is a standard button. When the popover is open, its contents follow the tab order.

Key	Action
Tab	Moves focus to the sign-in or avatar button, then through the popover content when open.
Enter / Space	Activates the focused button: signs in, opens or closes the popover, or signs out.
Escape	Closes the open popover.

The popover is anchored to the avatar button and shows the user’s full name and email as text, so they are read as the user moves through its content. Links are read as regular links from their slotted <a> elements.