---
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/components/resourceitem
  md: https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/components/resourceitem.md
---

# Resource​Item

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.

## 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

* #### 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',
    () => <App />,
  );

  function App() {
    return (
      <View maxInlineSize={300}>
        <ResourceItem
          accessibilityLabel="Resource Item"
          onPress={() => {}}
          actionLabel="Manage"
          action={
            <>
              <Button
                kind="primary"
                onPress={() => {}}
              >
                Pay now
              </Button>
              <Button onPress={() => {}}>
                Second action
              </Button>
              <Button onPress={() => {}}>
                Third action
              </Button>
            </>
          }
        >
          Resource item content
        </ResourceItem>
      </View>
    );
  }
  ```

  ##### 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);
  }
  ```

## Preview

![An example of how the ResourceItem component is used to represent one order in the grid view of the Order index page.](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/resourceitem-preview.png)

## 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.