Better Auth UI

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" />
}

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"
import { LayoutCells, Persons } from "@gravity-ui/icons"

export function UserButtonLinksDemo() {
  return (
    <UserButton
      links={[
        {
          label: "Dashboard",
          href: "/dashboard",
          icon: <LayoutCells className="text-muted" />,
          visibility: "authenticated"
        },
        {
          label: "Team",
          href: "/team",
          icon: <Persons className="text-muted" />
        }
      ]}
    />
  )
}

For interactive items shared across the app (for example a theme toggle or account switcher), prefer a plugin's userMenuItems slot over links.

Props

Prop

Type

<UserButton />

Usage

Icon

Custom links

Props

On this page