---
title: Pricing options
description: Use the pricing options to display pricing plan information on a page.
keywords: ['pricing', 'plans', 'options', 'features']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/PricingOptions/PricingOptions.tsx
storybook: '/brand/storybook/?path=/story/components-pricingoptions--default'
---

## Examples

### Default

```jsx
<PricingOptions>
  <PricingOptions.Item>
    <PricingOptions.Heading>Copilot</PricingOptions.Heading>
    <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" originalPrice="20" trailingText="per month / $100 per year">
      10
    </PricingOptions.Price>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
    <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
    <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
  </PricingOptions.Item>

  <PricingOptions.Item>
    <PricingOptions.Label>Recommended</PricingOptions.Label>
    <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
    <PricingOptions.Description>
      Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
      Enterprise Cloud.
    </PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per user / month" originalPrice="49">
      39
    </PricingOptions.Price>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
    <PricingOptions.PrimaryAction href="/buy">Join waitlist</PricingOptions.PrimaryAction>
  </PricingOptions.Item>
</PricingOptions>
```

### Cards variant

```jsx
<PricingOptions variant="cards">
  <PricingOptions.Item>
    <PricingOptions.Heading>Copilot</PricingOptions.Heading>
    <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
      10
    </PricingOptions.Price>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
    <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
    <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
  </PricingOptions.Item>

  <PricingOptions.Item>
    <PricingOptions.Label>Recommended</PricingOptions.Label>
    <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
    <PricingOptions.Description>
      Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
      Enterprise Cloud.
    </PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
      39
    </PricingOptions.Price>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
    <PricingOptions.PrimaryAction href="/buy">Join waitlist</PricingOptions.PrimaryAction>
  </PricingOptions.Item>
</PricingOptions>
```

### Gradient variant

```jsx
<PricingOptions variant="default-gradient">
  <PricingOptions.Item>
    <PricingOptions.Heading>Copilot</PricingOptions.Heading>
    <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
      10
    </PricingOptions.Price>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
    <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
    <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
  </PricingOptions.Item>

  <PricingOptions.Item>
    <PricingOptions.Label>Recommended</PricingOptions.Label>
    <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
    <PricingOptions.Description>
      Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
      Enterprise Cloud.
    </PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
      39
    </PricingOptions.Price>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
    <PricingOptions.PrimaryAction href="/buy">Join waitlist</PricingOptions.PrimaryAction>
  </PricingOptions.Item>
</PricingOptions>
```

### Center alignment

```jsx
<PricingOptions variant="cards" align="center">
  <PricingOptions.Item>
    <PricingOptions.Heading>Copilot</PricingOptions.Heading>
    <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
      10
    </PricingOptions.Price>
    <PricingOptions.PrimaryAction href="#">Buy now</PricingOptions.PrimaryAction>
  </PricingOptions.Item>

  <PricingOptions.Item>
    <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
    <PricingOptions.Description>
      Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
      Enterprise Cloud.
    </PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
      39
    </PricingOptions.Price>
    <PricingOptions.PrimaryAction href="#">Join waitlist</PricingOptions.PrimaryAction>
    <PricingOptions.SecondaryAction href="#">Contact sales</PricingOptions.SecondaryAction>
  </PricingOptions.Item>
</PricingOptions>
```

### One option

This is the one-option layout for the pricing options component

```jsx
<PricingOptions>
  <PricingOptions.Item>
    <PricingOptions.Heading>Copilot Individual</PricingOptions.Heading>
    <PricingOptions.Description>
      Code completions, Chat, and more for indie developers and freelancers.
    </PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
      10
    </PricingOptions.Price>
    <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
    <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
  </PricingOptions.Item>
</PricingOptions>
```

### Two options

This is the two-item layout for the pricing options component.

```jsx
<PricingOptions>
  <PricingOptions.Item>
    <PricingOptions.Heading>Copilot</PricingOptions.Heading>
    <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
      10
    </PricingOptions.Price>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
    <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
    <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
  </PricingOptions.Item>

  <PricingOptions.Item>
    <PricingOptions.Label>Recommended</PricingOptions.Label>
    <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
    <PricingOptions.Description>
      Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
      Enterprise Cloud.
    </PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
      39
    </PricingOptions.Price>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
    <PricingOptions.PrimaryAction href="/buy">Join waitlist</PricingOptions.PrimaryAction>
  </PricingOptions.Item>
</PricingOptions>
```

### Three and four options

`PricingOptions` supports a maximum of four items in both `default` and `card` layouts.

Please refer to our Storybook
examples
to see the component in a full-width context as originally intended.

> `PricingOptions` is designed to fill the width of the page's main container,
> thus it cannot be accurately represented within the narrower container of this
> documentation.

### Feature list sets

Use `PricingOptions.FeatureListGroupHeading` to group feature items together.

```jsx
<PricingOptions>
  <PricingOptions.Item>
    <PricingOptions.Heading>Copilot Individual</PricingOptions.Heading>
    <PricingOptions.Description>
      Code completions, Chat, and more for indie developers and freelancers.
    </PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
      10
    </PricingOptions.Price>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListGroupHeading>Base features</PricingOptions.FeatureListGroupHeading>
      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>

      <PricingOptions.FeatureListGroupHeading>Security</PricingOptions.FeatureListGroupHeading>
      <PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>

    <PricingOptions.Footnote>
      Free for verified students, teachers, and maintainers of popular open source projects.
    </PricingOptions.Footnote>

    <PricingOptions.PrimaryAction href="/buy">Start a free trial</PricingOptions.PrimaryAction>
  </PricingOptions.Item>

  <PricingOptions.Item>
    <PricingOptions.Label>Recommended</PricingOptions.Label>
    <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
    <PricingOptions.Description>Copilot personalized to your organization.</PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
      19
    </PricingOptions.Price>
    <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
    <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListGroupHeading>Base features</PricingOptions.FeatureListGroupHeading>
      <PricingOptions.FeatureListItem>Everything in Copilot Individual</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Code referencing</PricingOptions.FeatureListItem>

      <PricingOptions.FeatureListGroupHeading>Security</PricingOptions.FeatureListGroupHeading>
      <PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Public code filter</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>IP indemnity</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Enterprise-grade security, safety, and privacy</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
  </PricingOptions.Item>
</PricingOptions>
```

### Included and excluded features

Use `PricingOptions.FeatureListItem` with `variant="included"` and `variant="excluded"` to list included and excluded features.

```jsx
<PricingOptions>
  <PricingOptions.Item>
    <PricingOptions.Heading>Copilot Individual</PricingOptions.Heading>
    <PricingOptions.Description>
      Code completions, Chat, and more for indie developers and freelancers.
    </PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
      10
    </PricingOptions.Price>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListGroupHeading>Chat</PricingOptions.FeatureListGroupHeading>
      <PricingOptions.FeatureListItem>Unlimited messages, interactions, and history</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Context-aware coding support and explanations</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem variant="excluded">
        Debugging and security remediation assistance
      </PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem variant="excluded">
        Repository-based semantic search
      </PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem variant="excluded">Access your knowledge base</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListGroupHeading>Code completion</PricingOptions.FeatureListGroupHeading>
      <PricingOptions.FeatureListItem>Code suggestions as you type</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Comments to code</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem variant="excluded">
        Fine-tuned models (coming soon)
      </PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>

    <PricingOptions.Footnote>
      Free for verified students, teachers, and maintainers of popular open source projects.
    </PricingOptions.Footnote>

    <PricingOptions.PrimaryAction href="/buy">Start a free trial</PricingOptions.PrimaryAction>
  </PricingOptions.Item>

  <PricingOptions.Item>
    <PricingOptions.Label>Available Feb 2024</PricingOptions.Label>
    <PricingOptions.Heading>Copilot Enterprise</PricingOptions.Heading>
    <PricingOptions.Description>
      Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
      Enterprise Cloud.
    </PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
      39
    </PricingOptions.Price>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListGroupHeading>Chat</PricingOptions.FeatureListGroupHeading>
      <PricingOptions.FeatureListItem>Unlimited messages, interactions, and history</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Context-aware coding support and explanations</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Debugging and security remediation assistance</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Repository-based semantic search</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Access your knowledge base</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListGroupHeading>Code completion</PricingOptions.FeatureListGroupHeading>
      <PricingOptions.FeatureListItem>Code suggestions as you type</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Comments to code</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Fine-tuned models (coming soon)</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
    <PricingOptions.PrimaryAction href="/waitlist">Join waitlist</PricingOptions.PrimaryAction>
  </PricingOptions.Item>
</PricingOptions>
```

### Info tooltips

Use `infoTooltip` on `PricingOptions.FeatureListItem` to add a supplementary tooltip to a feature.

```jsx
<PricingOptions>
  <PricingOptions.Item>
    <PricingOptions.Heading>Pro</PricingOptions.Heading>
    <PricingOptions.Description>Accelerate workflows with GitHub Copilot.</PricingOptions.Description>
    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
      10
    </PricingOptions.Price>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem infoTooltip="Interact with Copilot using natural language.">
        Chat in IDE and Mobile
      </PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem infoTooltip="Get help directly in your terminal.">
        CLI assistance
      </PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
    <PricingOptions.PrimaryAction href="/buy">Start a free trial</PricingOptions.PrimaryAction>
  </PricingOptions.Item>
</PricingOptions>
```

### Actions message

Use `PricingOptions.ActionsMessage` to render status, billing, or upgrade notes in the actions area. Add
`leadingComponent` when you want to show a supporting icon.

```jsx
<PricingOptions variant="cards">
  <PricingOptions.Item>
    <PricingOptions.Label>Most popular</PricingOptions.Label>
    <PricingOptions.Heading>Pro</PricingOptions.Heading>
    <PricingOptions.Description>Accelerate workflows with GitHub Copilot.</PricingOptions.Description>
    <PricingOptions.Price trailingText="per user / month">10</PricingOptions.Price>
    <PricingOptions.PrimaryAction disabled>Upgrade now</PricingOptions.PrimaryAction>
    <PricingOptions.ActionsMessage leadingComponent={<InfoIcon />}>
      <Text as="p" size="100">
        <strong>Upgrades are temporarily paused.</strong> We are rolling out a more flexible billing experience.
      </Text>
    </PricingOptions.ActionsMessage>
    <PricingOptions.FeatureList hasDivider={false}>
      <PricingOptions.FeatureListItem>Copilot cloud agent</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Copilot code review</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Claude and Codex on GitHub and VS Code</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
  </PricingOptions.Item>
</PricingOptions>
```

## Component props

### PricingOptions `Required`

| Name       | Type                                                             |  Default  | required | Description                         |
| :--------- | :--------------------------------------------------------------- | :-------: | :------: | :---------------------------------- |
| `as`       | `'section' \| 'div'`                                             | `section` |  `false` | Applies the underlying HTML element |
| `children` | `PricingOptions.Item`                                            |           |  `true`  | Applies the underlying HTML element |
| `variant`  | `'default' \| 'default-gradient' \| 'cards' \| 'cards-gradient'` |           |  `false` | Sets the style variant              |
| `style`    | `React.CSSProperties`                                            |           |  `false` | Inline CSS overrides                |

### PricingOptions.Item `Required`

One item per pricing plan to be displayed. Maximum of 4 items.

| Name       | Type                                                                                                                                                                                                                                                                                                                |   Default   | required | Description              |
| :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :---------: | :------: | :----------------------- |
| `children` | `'PricingOptions.Heading' \| 'PricingOptions.Label' \| 'PricingOptions.Description' \| 'PricingOptions.Price' \| 'PricingOptions.PrimaryAction' \| 'PricingOptions.SecondaryAction' \| 'PricingOptions.ActionsMessage' \| 'PricingOptions.FeatureList' \| 'PricingOptions.Footnote' \| 'PricingOptions.MenuAction'` | `undefined` |  `true`  | The contents of the item |

### PricingOptions.Heading `Required`

| Name       | Type          |   Default   | required | Description                                       |
| :--------- | :------------ | :---------: | :------: | :------------------------------------------------ |
| `as`       | `HeadingTags` |     `h3`    |  `false` | Applies the underlying HTML heading level element |
| `children` | `ReactNode`   | `undefined` |  `true`  | The heading of the item                           |

### PricingOptions.Label

| Name       | Type        |   Default   | required | Description                          |
| :--------- | :---------- | :---------: | :------: | :----------------------------------- |
| `children` | `ReactNode` | `undefined` |  `true`  | The column header label for the item |

### PricingOptions.Description

| Name       | Type        |   Default   | required | Description                 |
| :--------- | :---------- | :---------: | :------: | :-------------------------- |
| `children` | `ReactNode` | `undefined` |  `true`  | The description of the item |

### PricingOptions.Price

| Name             | Type        |   Default   | required | Description                                        |
| :--------------- | :---------- | :---------: | :------: | :------------------------------------------------- |
| `children`       | `ReactNode` | `undefined` |  `true`  | The price of the item                              |
| `currencyCode`   | `string`    |    `USD`    |  `false` | The currency code                                  |
| `currencySymbol` | `string`    |     `$`     |  `false` | The currency symbol                                |
| `originalPrice`  | `string`    | `undefined` |  `false` | The initial price before any discounts are applied |
| `trailingText`   | `string`    |             |  `false` | The trailing text                                  |

### PricingOptions.ActionsMessage

| Name               | Type           |   Default   | required | Description                                                                       |
| :----------------- | :------------- | :---------: | :------: | :-------------------------------------------------------------------------------- |
| `children`         | `ReactNode`    | `undefined` |  `true`  | The message content rendered in the actions area                                  |
| `leadingComponent` | `ReactElement` | `undefined` |  `false` | Optional leading visual, typically an icon. Sizing is handled by component styles |

### PricingOptions.FeatureList

| Name          | Type                                                                           |   Default   | required | Description                                                                                                 |
| :------------ | :----------------------------------------------------------------------------- | :---------: | :------: | :---------------------------------------------------------------------------------------------------------- |
| `children`    | `'PricingOptions.FeatureListGroupHeading' \| 'PricingOptions.FeatureListItem'` | `undefined` |  `true`  | The list of features                                                                                        |
| `accordionAs` | `HeadingTags`                                                                  |     `h4`    |  `false` | Applies the underlying HTML heading level element                                                           |
| `expanded`    | `boolean`                                                                      |    `true`   |  `false` | Controls visibility of feature items. Accepts Object type for granular control at different viewport sizes. |
| `hasDivider`  | `boolean`                                                                      |    `true`   |  `false` | Controls visibility of a visual border between feature lists and adjacent actions                           |

### PricingOptions.FeatureListGroupHeading

| Name       | Type        |       Default       | required | Description                         |
| :--------- | :---------- | :-----------------: | :------: | :---------------------------------- |
| `children` | `ReactNode` | `"What's included"` |  `false` | A custom title for the feature list |

### PricingOptions.FeatureListGroupHeading

| Name       | Type         |   Default   | required | Description                                       |
| :--------- | :----------- | :---------: | :------: | :------------------------------------------------ |
| `as`       | `h4, h5, h6` |     `h4`    |  `false` | Applies the underlying HTML heading level element |
| `children` | `ReactNode`  | `undefined` |  `true`  | The heading of the feature list set               |

### PricingOptions.FeatureListItem

| Name          | Type                       |   Default   | required | Description                                               |
| :------------ | :------------------------- | :---------: | :------: | :-------------------------------------------------------- |
| `children`    | `ReactNode`                | `undefined` |  `true`  | The item of the feature list set                          |
| `infoTooltip` | `string`                   | `undefined` |  `false` | Tooltip text shown on hover/focus via an info icon button |
| `variant`     | `'included' \| 'excluded'` |  `included` |  `false` | The variant of the feature list set                       |

### PricingOptions.MenuAction

| Name       | Type        |   Default   | required | Description                                                 |
| :--------- | :---------- | :---------: | :------: | :---------------------------------------------------------- |
| `children` | `ReactNode` | `undefined` |  `true`  | An `ActionMenu` component, typically in `split-button` mode |

### PricingOptions.Footnote

| Name       | Type        |   Default   | required | Description              |
| :--------- | :---------- | :---------: | :------: | :----------------------- |
| `children` | `ReactNode` | `undefined` |  `true`  | The footnote of the item |