# <PlanDetailsButton /> component

![The <PlanDetailsButton /> component renders a button that opens the Plan details drawer.](https://clerk.com/docs/raw/_public/images/ui-components/plan-details.svg){{ 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.

> Billing regularly introduces new features and UI changes to Clerk's components. If you'd like to remain on a specific version of Clerk's components or SDK, you can follow the steps in the [pinning](https://clerk.com/docs/pinning.md?sdk=tanstack-react-start) documentation.

## Usage

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

```tsx
<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.

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

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

### Example

filename: app/routes/pricing.tsx
```tsx
import { PlanDetailsButton } from '@clerk/tanstack-react-start/experimental'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/pricing')({
  component: PricingPage,
})

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>
  )
}
```

## Properties

| Name                                                                                                                                    | Type                                                                           | Description                                                                                            |
| --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |
| 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.               |
| appearance: an object used to style your components. For example: <PlanDetailsButton planDetailsProps={{ appearance: { ... } }} />. | portalId: the ID of the portal element used to render the Plan details drawer. |                                                                                                        |

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)