Choose a version:

ResourceItem

Use to represent a specific object within a collection, that a customer can take action on. For example, a list of active subscriptions or redeemable offers, in a style consistent with the order index page.

Anchor to resourceitempropsResourceItemProps

accessibilityLabel

string

A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.

action

RemoteFragment

The action grouping for the item, provided as buttons.

actionAccessibilityLabel

string

Default: "More actions"

Accessibility label for the action grouping. If an accessibility label is not provided, default text is used.

actionLabel

string

Default: "More actions"

Label for the action grouping. If a label is not provided, default text is used.

loading

boolean

Default: false

Indicates that the item is in a loading state.

When true, the item shows loading indicators for the UI elements that it is owns. The item is not responsible for the loading indicators of any content that is passed as children.

onPress

() => void

Callback when pressed. If to is set, it will execute the callback and then navigate to the location specified by to.

to

string

Destination to navigate to. You must provide either this property, onPress, or both.

Was this section helpful?

Anchor to buttonprops actionButtonProps action

Supported props for Buttons used inside ResourceItem action prop.

children only support text.

accessibilityLabel

string

A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.

disabled

boolean

Default: false

Disables the button, disallowing any interaction.

kind

'primary' | 'secondary' | 'plain'

Default: 'primary'

The type of button that will be rendered. The visual presentation of the button type is controlled by merchants through the Branding API.

primary: button used for main actions. For example: "Continue to next step".

secondary: button used for secondary actions not blocking user progress. For example: "Download Shop app".

plain: renders a button that visually looks like a link.

loading

boolean

Default: false

Replaces content with a loading indicator.

loadingLabel

string

Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading is true.

onPress

() => void

Callback that is run when the button is pressed.

overlay

RemoteFragment

An overlay component to render when the user interacts with the component.

to

string

Destination URL to link to.

Was this section helpful?

ResourceItem

import {

ResourceItem,

Button,

Text,

View,

reactExtension,

} from '@shopify/ui-extensions-react/customer-account';

import React from 'react';

export default reactExtension(

'customer-account.page.render',

() => <App />,

);

function App() {

return (

<ResourceItem

accessibilityLabel="Resource Item"

onPress={() => {}}

actionLabel="Manage"

action={

<>

<Button

kind="primary"

onPress={() => {}}

>

Pay now

</Button>

Second action

</Button>

Third action

</Button>

</>

}

>

Resource item content

</ResourceItem>

</View>

);

}

Preview

An example of how the ResourceItem component is used to represent one order in the grid view of the Order index page.

Anchor to best-practicesBest Practices

Group related information.
Structure your content so it’s easy for customers to scan to the most important information.
Use images to complement text content.
If there is a single primary action for the object, display it as a primary button. Display other object-level actions as secondary buttons.
See UX guidelines to learn more about the button logic for order actions.

Was this section helpful?