║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: "<PlanDetailsButton /> component" description: "Clerk's <PlanDetailsButton /> component renders a button that opens the plan details drawer." sdk: react, nextjs, vue

{{ style: { maxWidth: '460px' } }}

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.

<Include src="_partials/billing/billing-experimental" />

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

<If sdk="nextjs"> ```tsx {{ filename: '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>
)

}

</If>

<If sdk="react">
```tsx {{ filename: 'src/components/PricingSection.tsx' }}
import { PlanDetailsButton } from '@clerk/clerk-react'

const PricingSection = () => {
  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>
  )
}

export default PricingSection

</If> <If sdk="vue"> ```vue {{ filename: 'pricing.vue' }} <script setup lang="ts"> import { PlanDetailsButton } from '@clerk/vue/experimental' </script> <template> <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 class="custom-button">View Plan Features</button>
  </PlanDetailsButton>
</div>

</template> ``` </If>

Properties

<Properties> - `planId?` - `string`

The ID of the plan to display details for. It is required if plan is not provided.

---

• plan?
• BillingPlanResource

The plan to display details for. It is used as initial data until the plan is fetched from the server.

---

• children?
• React.ReactNode

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

---

• initialPlanPeriod?
• 'month' | 'annual'

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

---

• planDetailsProps?
• { appearance: Appearance }

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

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

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║