<UserButton />

The <UserButton /> component provides an easy-to-use dropdown menu button that displays user account information and session management actions. It includes an avatar, provides quick access to user settings, linked accounts, and session management actions.

Usage

import { UserButton } from "@daveyplate/better-auth-ui";

export default function Example() {
  return <UserButton />;
}

Reference

These are the available props for the <UserButton /> component:

Examples

Icon Size Button

The size="icon" prop turns the UserButton into a small button, showing only the user's avatar. This is the default size.

import { UserButton } from "@daveyplate/better-auth-ui";

export default function Example() {
  return (
    <UserButton />
  )
}

Full Width Button

The size="full" prop turns the UserButton into a wide button, showing the user's avatar, name or email, and dropdown arrow. Recommended for desktop user menus.

import { UserButton } from "@daveyplate/better-auth-ui";

export default function Example() {
  return <UserButton size="full" />
}

Styling

You can fully customize the appearance of the UserButton component with UserButtonClassNames using the classNames prop.

Here's an example that drastically customizes the styling:

import { UserButton } from "@daveyplate/better-auth-ui";

export default function Example() {
  return (
    <UserButton
      className="border-destructive w-64 bg-destructive/30"
      classNames={{
        content: {
          avatar: {
            fallback: "bg-destructive text-white"
          }
        }
      }}
      size="full"
    />
  )
}