Components
<UserButton />
Renders a user button with dropdown menu showing user info and sign out option.
Usage
import { UserButton } from "@better-auth-ui/heroui"
export function UserButtonDemo() {
return <UserButton />
}Icon
import { UserButton } from "@better-auth-ui/heroui"
export function UserButtonIconDemo() {
return <UserButton size="icon" />
}Custom links
Use the links prop to add entries above the built-in items. Each entry is either a { label, href, icon?, variant?, visibility? } descriptor or a fully rendered React element. visibility defaults to "always" and accepts "authenticated" | "unauthenticated" | "always". Pass hideSettings to remove the built-in Settings link.
import { UserButton } from "@better-auth-ui/heroui"
export function UserButtonLinksDemo() {
return (
<UserButton
links={[
{ label: "Dashboard", href: "/dashboard", visibility: "authenticated" },
{ label: "Team", href: "/team" }
]}
/>
)
}For interactive items shared across the app (e.g. a theme toggle or account switcher), prefer a plugin's userMenuItems slot over links.
Props
Last updated on