Skip to main content
Docs

<PlanDetailsButton /> component

The <PlanDetailsButton /> component renders a button that opens the plan details drawer, allowing users to view detailed information about a specific plan, including pricing, features, and other plan-specific details.

Warning

This API is experimental and subject to change while Clerk Billing is under Beta. To mitigate potential disruptions, we recommend pinning your SDK and clerk-js package versions.

Properties

  • Name
    planId?
    Type
    string
    Description

    The ID of the plan to display details for.

  • Name
    children?
    Type
    React.ReactNode
    Description

    Optional custom button element. If not provided, defaults to a button with the text "Plan details".

  • Name
    initialPlanPeriod?
    Type
    'month' | 'annual'
    Description

    Optional prop to set the initial billing period view when the plan details drawer opens.

  • Name
    planDetailsProps?
    Type
    { appearance: Appearance }
    Description

    Options for the plan details drawer. Accepts the following properties:

    • appearance: an object used to style your components. For example: <PlanDetailsButton planDetailsProps={{ appearance: { ... } }} />.

Usage

<PlanDetailsButton /> preserves any click handlers attached to custom button elements, while maintaining the plan details drawer functionality.

<PlanDetailsButton planId="cplan_xxx">
  <button onClick={() => console.log('Button clicked')} className="custom-button">
    View Plan
  </button>
</PlanDetailsButton>

<PlanDetailsButton /> supports rendering the plan details drawer in a custom portal container.

const portalRoot = document.getElementById('custom-portal')

<PlanDetailsButton
  planId="cplan_xxx"
  planDetailsProps={{
    portalId: 'custom-portal',
    portalRoot: portalRoot,
  }}
/>

Examples

app/pricing/page.tsx
'use client'

import { PlanDetailsButton } from '@clerk/nextjs/experimental'

export default function PricingPage() {
  return (
    <div>
      {/* Basic usage with plan ID */}
      <PlanDetailsButton planId="cplan_xxx" />

      {/* Customizes the appearance of the plan details drawer */}
      <PlanDetailsButton
        planId="cplan_xxx"
        initialPlanPeriod="month"
        planDetailsProps={{
          appearance: {
            /* custom theme */
          },
        }}
      />

      {/* Custom button */}
      <PlanDetailsButton planId="cplan_xxx">
        <button className="custom-button">
          <Icon name="info" />
          View Plan Features
        </button>
      </PlanDetailsButton>
    </div>
  )
}
src/components/PricingSection.tsx
import { PlanDetailsButton } from '@clerk/clerk-react'

const PricingSection = () => {
  return (
    <div>
      {/* Basic usage with plan ID */}
      <PlanDetailsButton planId="cplan_xxx" />

      {/* Customize the appearance of the plan details drawer */}
      <PlanDetailsButton
        planId="cplan_xxx"
        initialPlanPeriod="month"
        planDetailsProps={{
          appearance: {
            /* custom theme */
          },
        }}
      />

      {/* Custom button */}
      <PlanDetailsButton planId="cplan_xxx">
        <button className="custom-button">
          <Icon name="info" />
          View Plan Features
        </button>
      </PlanDetailsButton>
    </div>
  )
}

export default PricingSection

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on