CODEWITHSUNDEEP
authenticationclerk
Eastonplayz
Eastonplayz

Reputation: 21

Adjust Clerk userButton size

For some reason Clerk with doesn’t provide a param to adjust the userButton size. The docs don’t seem to have anything about how to adjust the size nor does google.

I have tried workarounds like:

` ’

But it stays the same, there were a few other methods but none worked.

Upvotes: 1

Views: 1928

Answers (2)

Sachin Lakshan
Sachin Lakshan

Reputation: 161

Add the following style in your globals.css file (If you're using NextJS).

.cl-avatarBox {
  width: 2.75rem;
  height: 2.75rem;
}

Upvotes: 2

rameztayem
rameztayem

Reputation: 31

u can do this
const HeaderIcons = async () => {
  const user = await getCurrentUser();
  const userButtonAppearance = {
    elements: {
      userButtonAvatarBox: "w-10 h-10", // Custom width and height
      userButtonPopoverCard: "bg-blue-100", // Custom background for the popover card
      userButtonPopoverActionButton: "text-red-600", // Custom text color for action buttons
    },
  };
  return <UserButton appearance={userButtonAppearance} />;
}

 1. `List item`

Upvotes: 3

Related Questions