组件
UserButton
即插即用的用户头像按钮，显示包含用户资料和退出登录按钮的下拉菜单。仅在用户已登录时渲染。
使用
tsx
import { UserButton } from "@authon/react";
// Drop into your header/navbar
function Header() {
return (
<nav>
<UserButton />
</nav>
);
}属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| afterSignOutUrl | string | provider default | 退出登录后的重定向 URL |
| showName | boolean | false | 在头像旁显示用户名 |
| size | "sm" | "md" | "lg" | "md" | 头像按钮尺寸 |
显示名称
tsx
<UserButton showName afterSignOutUrl="/" />头像显示
UserButton 按优先级顺序显示用户头像：
- 1.来自 OAuth 登录方式的个人头像（Google、GitHub 等）
- 2.用户自定义上传的头像
- 3.基于显示名称生成的姓名首字母头像