# DetailPagePropertyList component for Stripe Apps Use DetailPagePropertyList to render your app in Stripe dashboard pages. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/detailpagepropertylist?app-sdk-version=8. The `DetailPagePropertyList` component isn’t available in the selected SDK version. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/detailpagepropertylist?app-sdk-version=9. To add the `DetailPagePropertyList` component to your app: ```js import {DetailPagePropertyList} from '@stripe/ui-extension-sdk/ui'; ``` The `DetailPagePropertyList` component provides a standardized way to display and organize content within the Stripe Dashboard. It creates a consistent UI section that seamlessly integrates with Stripe’s design system. It displays structured key-value data pairs in either a horizontal or vertical orientation. You can use this format for showing object details, configurations, or any information that naturally fits into label-value relationships, maintaining Stripe’s design consistency. It can display up to eight items. ### DetailPagePropertyList props | Property | Type | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `pending` | (Required) `boolean` Sets the visual style to pending. | | `createAction` | (Optional) `(() => void) | undefined` An event handler to create a new item. | | `emptyMessage` | (Optional) `(string | DetailPageModuleEmptyActionMessage) | undefined` The message to display when the table is empty. Related types: [DetailPageModuleEmptyActionMessage](https://docs.stripe.com/stripe-apps/components/detailpagepropertylist.md#detailpagemoduleemptyactionmessage). | | `error` | (Optional) `DetailPageModuleDisplayError | undefined` Sets the visual style to `error`, displaying an error message. Related types: [DetailPageModuleDisplayError](https://docs.stripe.com/stripe-apps/components/detailpagepropertylist.md#detailpagemoduledisplayerror). | | `extraActions` | (Optional) `DetailPageModuleAction[] | undefined` An array of extra actions to display in the module. Related types: [DetailPageModuleAction](https://docs.stripe.com/stripe-apps/components/detailpagepropertylist.md#detailpagemoduleaction). | | `items` | (Optional) `DetailPagePropertyListItem[] | undefined` The items to display in the property list. Each item defines a label-values pair. Related types: [DetailPagePropertyListItem](https://docs.stripe.com/stripe-apps/components/detailpagepropertylist.md#detailpagepropertylistitem). | | `orientation` | (Optional) `("vertical" | "horizontal") | undefined` The orientation of the list. | ### DetailPageModuleEmptyActionMessage | Property | Type | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `action` | (Required) `Action` An call to action displayed below the message. Related types: [Action](https://docs.stripe.com/stripe-apps/components/detailpagepropertylist.md#detailpagemoduleemptyactionmessage-action). | | `message` | (Required) `string` A custom message to display when the table is empty. | ### DetailPageModuleEmptyActionMessage Action | Property | Type | | -------- | ------------------------------------------------- | | `href` | (Required) `string` The link of the action. | | `label` | (Required) `string` The label of the action. | ### DetailPageModuleDisplayError | Property | Type | | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `message` | (Required) `string` The error message to display. | | `errorAction` | (Optional) `ErrorAction | undefined` An action to handle the error. Related types: [ErrorAction](https://docs.stripe.com/stripe-apps/components/detailpagepropertylist.md#detailpagemoduledisplayerror-erroraction). | ### DetailPageModuleDisplayError ErrorAction | Property | Type | | -------- | ------------------------------------------------------- | | `href` | (Required) `string` Native `href` attribute. | | `title` | (Required) `string` The title of the error action. | ### DetailPageModuleAction | Property | Type | | --------- | ------------------------------------------------------------- | | `label` | (Required) `string` The label of the action. | | `onPress` | (Required) `() => void` An event handler for the action. | ### DetailPagePropertyListItem | Property | Type | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `label` | (Required) `string` The label of the property. | | `values` | (Required) `Array` The values of the property. Related types: [Values](https://docs.stripe.com/stripe-apps/components/detailpagepropertylist.md#detailpagepropertylistitem-values). Related types: [DetailPageModulePropertyListItemValue](https://docs.stripe.com/stripe-apps/components/detailpagepropertylist.md#detailpagemodulepropertylistitemvalue). | | `description` | (Optional) `string | undefined` The description of the property. | ### DetailPagePropertyListItem Values | Property | Type | | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `label` | (Optional) `DetailPageModulePropertyListItemValue | undefined` The label of the value. Related types: [DetailPageModulePropertyListItemValue](https://docs.stripe.com/stripe-apps/components/detailpagepropertylist.md#detailpagemodulepropertylistitemvalue). | | `value` | (Optional) `DetailPageModulePropertyListItemValue | undefined` The sub-value of the value. Related types: [DetailPageModulePropertyListItemValue](https://docs.stripe.com/stripe-apps/components/detailpagepropertylist.md#detailpagemodulepropertylistitemvalue). | ### DetailPageModulePropertyListItemValue | Property | Type | | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `action` | (Optional) `Action | undefined` An action to display in the value. Related types: [Action](https://docs.stripe.com/stripe-apps/components/detailpagepropertylist.md#detailpagemodulepropertylistitemvalue-action). | | `text` | (Optional) `string | undefined` The label of the value. | ### DetailPageModulePropertyListItemValue Action | Property | Type | | --------- | ---------------------------------------------------------------------------------- | | `onPress` | (Required) `() => void` An event handler for when the user clicks the action. | | `title` | (Required) `string` The title of the action. | ## See also - [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md) - [Style your app](https://docs.stripe.com/stripe-apps/style.md) - [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)