---
title: ResourceItem
description: >-
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.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/resourceitem
md: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/resourceitem.md
---
Migrate to Polaris
Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-10/upgrading-to-2025-10) to upgrade your extension.
# 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.
### Support Targets (25)
### Supported targets
* CustomerAccount::KitchenSink
* customer-account.footer.render-after
* customer-account.order-index.announcement.render
* customer-account.order-index.block.render
* customer-account.order-status.announcement.render
* customer-account.order-status.block.render
* customer-account.order-status.cart-line-item.render-after
* customer-account.order-status.cart-line-list.render-after
* customer-account.order-status.customer-information.render-after
* customer-account.order-status.fulfillment-details.render-after
* customer-account.order-status.payment-details.render-after
* customer-account.order-status.return-details.render-after
* customer-account.order-status.unfulfilled-items.render-after
* customer-account.order.action.menu-item.render
* customer-account.order.action.render
* customer-account.order.page.render
* customer-account.page.render
* customer-account.profile.addresses.render-after
* customer-account.profile.announcement.render
* customer-account.profile.block.render
* customer-account.profile.company-details.render-after
* customer-account.profile.company-location-addresses.render-after
* customer-account.profile.company-location-payment.render-after
* customer-account.profile.company-location-staff.render-after
* customer-account.profile.payment.render-after
## ResourceItemProps
* **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.
## ButtonProps 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.
Examples
## Preview
### Examples
* #### ResourceItem
##### React
```tsx
import {
ResourceItem,
Button,
Text,
View,
reactExtension,
} from '@shopify/ui-extensions-react/customer-account';
import React from 'react';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function App() {
return (
{}}
actionLabel="Manage"
action={
<>
}
>
Resource item content
);
}
```
##### JS
```js
import {
ResourceItem,
Button,
View,
extension,
} from '@shopify/ui-extensions/customer-account';
export default extension(
'customer-account.page.render',
(root, api) => {
renderApp(root, api);
},
)
function renderApp(root, api) {
const actionFragment = root.createFragment();
const primaryButton = root.createComponent(Button, {
kind: 'primary',
onPress: () => {},
});
primaryButton.append(root.createText('Pay now'))
const secondButton = root.createComponent(Button, {
kind: 'secondary',
onPress: () => {},
});
secondButton.append(root.createText('Second button'))
const thirdButton = root.createComponent(Button, {
kind: 'secondary',
onPress: () => {},
});
thirdButton.append(root.createText('Third button'))
actionFragment.append(primaryButton);
actionFragment.append(secondButton);
actionFragment.append(thirdButton);
const resourceItem = root.createComponent(
ResourceItem,
{
accessibilityLabel: 'Resource Item',
onPress: () => {},
actionLabel: 'Manage',
action: actionFragment,
},
'Content',
);
const view = root.createComponent(View, {maxInlineSize: 300});
view.append(resourceItem);
root.append(view);
}
```
## Best 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](https://shopify.dev/docs/apps/customer-accounts/order-action-menu-extensions/ux-guidelines) to learn more about the button logic for order actions.