<authui-user-button>
Avatar with an account menu while signed in, a sign-in button otherwise.
<authui-user-button></authui-user-button>
<authui-user-button src="https://example.com/avatar.png">Log in</authui-user-button>Attributes
| Name | Type | Description |
|---|---|---|
src | string | Optional avatar image URL override. When empty, Auth UI uses Appwrite avatars.getPhoto() for the signed-in user (OAuth photo, Gravatar, or initials). On image error, falls back to a local initial glyph. |
show-teams | boolean | List Appwrite teams and let the user pick an active one. |
menuItems | AuthUIMenuItem[] | Extra menu rows (property only). See Custom menu items. |
Slots
The default slot is the label of the sign-in button shown while signed out. The named slot menu-items projects custom content into the signed-in menu (between teams and Manage account). Prefer the menuItems property when you want those rows included in arrow-key navigation.
Menu
Clicking the avatar opens a menu with the user's name and email, optional custom items, Manage account (opens the modal on the account screen) and Sign out. The menu closes on outside click and Escape.
Custom menu items
Pass a menuItems array of { label, href?, target?, actionId? }. Links use href (and optional target). Action rows fire authui-menu-action with { actionId } when clicked. Labels are used as-is (not passed through t()).
<authui-user-button id="user"></authui-user-button>
<script>
const btn = document.getElementById("user");
btn.menuItems = [
{ label: "Billing", actionId: "billing" },
{ label: "Docs", href: "/docs", target: "_blank" },
];
btn.addEventListener("authui-menu-action", (e) => {
if (e.detail.actionId === "billing") location.href = "/billing";
});
</script>Or project markup with the named slot:
<authui-user-button>
<button slot="menu-items" class="menu-item" role="menuitem" type="button">Billing</button>
</authui-user-button>Teams switcher
Set show-teams to list the signed-in user's Appwrite teams in the menu and let them pick an active team. The choice is stored in localStorage (authui:active-team:<projectId>) and Auth UI emits authui:active-team on window (and authui-active-team on the element) with { teamId, team }. Use Manage teams in the menu (or the Teams tab on the account screen) to create teams, invite members, and leave teams. Invite emails return through Auth UI's redirect handler (authui=team-invite).
<authui-user-button show-teams></authui-user-button>
<script>
AuthUI.on("active-team", ({ teamId, team }) => {
console.log("active team", teamId, team?.name);
});
</script>