Clerk · Component

UserButton.Action

UserButton.Action adds a custom action item to Clerk's UserButton menu. It can run an onClick callback or open a specific page in the UserProfile modal.

How it works

UserButton.Action adds a custom item to the UserButton menu. Give it a label, optionally an icon, and either an onClick handler for application behavior or an open value to open a specific custom page in the UserProfile modal.

Syntax

<UserButton.Action label="..." labelIcon={...} onClick={...} open="..." />

Parameters

Name	Type	Description
`label`	`string`	The text displayed for the menu item.
`labelIcon`	`React.ReactElement`	An icon displayed beside the label.
`onClick?`	`void`	A callback invoked when the item is clicked.
`open?`	`string`	The path segment used to open a specific UserProfile modal page.

Key points

Use UserButton.Action for app-specific menu behavior such as opening chat or triggering a modal.
The component represents an interactive custom menu item rather than a standalone button.
label is the visible name users select in the UserButton menu.
labelIcon adds a visual icon beside the action's label.
open targets a specific page in the UserProfile modal using its path segment.
onClick supplies the callback for application-owned behavior after selection.

Common mistakes

Astro cannot use an onClick handler directly because component props become strings; use the framework-specific event pattern described by the page.

Example: Add an action to UserButton

import { UserButton } from '@clerk/nextjs'

export function AccountMenu() {
  return (
    <UserButton>
      <UserButton.MenuItems>
        <UserButton.Action
          label="Open chat"
          onClick={() => window.alert('Chat opened')}
        />
      </UserButton.MenuItems>
    </UserButton>
  )
}

Adds an Open chat item to the user menu and runs application code when the item is clicked.

When to use it

Trigger app UI

Run application logic such as opening a chat or modal from the account menu.

Open a profile page

Direct users to a configured custom page inside Clerk's profile modal.

Add an icon

Give a custom menu command a recognizable visual marker.

Interview questions

QHow do you add a clickable custom action to UserButton?

Place UserButton.Action inside UserButton.MenuItems nested within UserButton. The label supplies the menu text, while onClick runs when the user selects the item.

Follow-up: How would you open a profile page instead of running client logic? Set open to the path segment for the custom UserProfile page.

QHow can the action be visually distinguished in the menu?

Use labelIcon to render an icon beside the menu label. The icon is a React.ReactElement, so it belongs alongside label in the action's props.

Follow-up: What should be used when the menu item needs navigation to a custom profile page? Use open rather than labelIcon or onClick.

QWhat does the open prop do?

Set open to the path segment of a custom page when the action should open that page in the UserProfile modal. The page must correspond to a configured custom profile page.

Follow-up: What alternative handles a chat modal or other app-owned UI? Supply onClick and trigger that UI from the handler.

UserButton
UserButton.MenuItems
UserButton.Link
UserProfile

Source: Add custom items and links to the <UserButton /> component. Checked 2026-10-15.