PropertyList component for Stripe Apps
Use PropertyList to display data as key-value pairs.
Warning
To add the PropertyList component to your app:
import {PropertyList, PropertyListItem} from '@stripe/ui-extension-sdk/ui';
The PropertyList component displays object properties as as set of labels and their respective values. You define each property as a key-value pair to help users find specific attributes.
Property lists can display both simple values and nested PropertyListItem components to create logical hierarchical sections that group related properties.
The following example shows a property list with simple values and nested sections.
<PropertyList> <PropertyListItem label="Object ID" value="cus_MIP4POO5wvyaly" /> <PropertyListItem label="Customer" value={<Link>Megan Smith</Link>} /> <PropertyListItem label="Last update" value="Sep 28, 10:50 PM" /> <PropertyListItem label="Payment method" value={ <Box css={{stack: 'x', alignY: 'center'}}> <Icon name="card" /> <Inline css={{marginLeft: 'small'}}>•••• 6178</Inline> </Box> } /> <PropertyListItem label="Payment Details" value={ <> <PropertyListItem label="Amount" value="$3000.00" /> <PropertyListItem label="Currency" value="USD" /> <PropertyListItem label="Status" value="Paid" /> <PropertyListItem label={<Link>Raw JSON</Link>} /> <PropertyListItem label={<Link>Revenue Recognition</Link>} /> </> } /> <PropertyListItem label="Property" value={ <> <PropertyListItem label="Location name" value="Austin HQ" /> <PropertyListItem label="Location address" value="123 Fake St. Austin, TX 78705" /> <PropertyListItem label="Device type" value="WisePOS E" /> </> } /> </PropertyList>
PropertyList props
| Property | Type |
|---|---|
| Required
One or more |
| Optional
The orientation of the list. |
PropertyListItem
A PropertyListItem defines one label-value pair within the PropertyList. You can create nested PropertyListItem sets by defining the value of one PropertyListItem as a set of additional PropertyListItem components.
PropertyListItem props
| Property | Type |
|---|---|
| Required
The name of the property to render in the list. |
| Optional
The value of the property to show, such as a static input, a formula, a database reference, or a nested set of |
Orientation
You can display the properties in your list either vertically (default) or horizontally.
<Box> <PropertyList orientation="vertical"> <PropertyListItem label="Object ID" value="cus_MIP4POO5wvyaly" /> <PropertyListItem label="Customer" value={<Link>Megan Smith</Link>} /> <PropertyListItem label="Last update" value="Sep 28, 10:50 PM" /> <PropertyListItem label="Payment method" value={ <Box css={{stack: 'x', alignY: 'center'}}> <Icon name="card" /> <Inline css={{marginLeft: 'small'}}>•••• 6178</Inline> </Box> } /> </PropertyList> <Box css={{marginY: 'large'}}> <Divider /> </Box> <PropertyList orientation="horizontal"> <PropertyListItem label="Object ID" value="cus_MIP4POO5wvyaly" /> <PropertyListItem label="Customer" value={<Link>Megan Smith</Link>} /> <PropertyListItem label="Last update" value="Sep 28, 10:50 PM" /> <PropertyListItem label="Payment method" value={ <Box css={{stack: 'x', alignY: 'center'}}> <Icon name="card" /> <Inline css={{marginLeft: 'small'}}>•••• 6178</Inline> </Box> } /> </PropertyList> </Box>