Skip to main content

<InviteMembersButton />

The <InviteMembersButton /> component renders a button that opens a modal containing the Organization invite-members form. It works like <SignInButton mode="modal">: wrap your own button and selecting it opens the modal.

Important

<InviteMembersButton /> only works when there's an and the current member has permission to manage memberships (org:sys_memberships:manage). Render it only for those members, gating it with <Show> when you're unsure. If either requirement isn't met, selecting the button does nothing in production and throws a descriptive error in development.

Usage

Basic usage

By default, <InviteMembersButton /> renders a button labeled "Invite members". The examples below gate it behind <Show> to check whether the current member has the org:sys_memberships:manage permission before rendering it.

app/routes/members.tsx
import { InviteMembersButton, Show } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/members')({
  component: Members,
})

function Members() {
  return (
    <Show when={{ permission: 'org:sys_memberships:manage' }}>
      <InviteMembersButton />
    </Show>
  )
}

Custom usage

You can create a custom button by wrapping your own button, or button text, in the <InviteMembersButton> component. Any click handlers attached to your button are preserved.

app/routes/members.tsx
import { InviteMembersButton, Show } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/members')({
  component: Members,
})

function Members() {
  return (
    <Show when={{ permission: 'org:sys_memberships:manage' }}>
      <InviteMembersButton>
        <button onClick={() => console.log('Opening invite modal')} className="custom-button">
          Invite members
        </button>
      </InviteMembersButton>
    </Show>
  )
}

If you want to render multiple elements, wrap them in a single parent element:

<InviteMembersButton>
  <button>
    <span>Invite</span>
    <span aria-hidden="true"> →</span>
  </button>
</InviteMembersButton>

Properties

The <InviteMembersButton /> component accepts the following properties, all of which are optional:

  • Name
    children?
    Type
    React.ReactNode
    Description

    The button element to wrap. Only accepts one child; if you want to render multiple elements, wrap them in a single parent element. If not provided, defaults to a button with the text "Invite members".

  • Name
    appearance?
    Type
    Appearance | undefined
    Description

    An object to style your components. Will only affect Clerk components and not Account Portal pages.

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub