Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

ResourceItem

The ResourceItem component represents a specific object within a collection that a customer can take action on. Use it for lists of active subscriptions, redeemable offers, or similar collections in a style consistent with the order index page.

Support

Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the ResourceItem component.

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or content of the link for users of assistive technologies such as screen readers. When set, any children supplied to this component won't be announced to screen reader users.
Anchor to action action RemoteFragment: The action grouping for the item, provided as buttons.
Anchor to actionAccessibilityLabel actionAccessibilityLabel string Default: "More actions": Accessibility label for the action grouping. If an accessibility label is not provided, default text is used.
Anchor to actionLabel actionLabel string Default: "More actions": Label for the action grouping. If a label is not provided, default text is used.
Anchor to loading 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.
Anchor to onPress onPress () => void: A callback fired when the link is activated. If to is set, the callback fires first, then navigation occurs.
Anchor to to to string: The URL to navigate to when the link is activated. You must provide either this property, onPress, or both.

Anchor to Action button propertiesAction button properties

Configure the following properties on the action button.

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or content of the button for users of assistive technologies such as screen readers. When set, any children supplied to this component won't be announced to screen reader users.
Anchor to disabled disabled boolean Default: false: Whether the button is disabled, preventing it from being activated or receiving focus.
Anchor to kind kind 'primary' | 'secondary' | 'plain' Default: 'primary': The visual style variant of the button, which controls its prominence and emphasis. The visual presentation is controlled through the Branding API.

'primary': High-emphasis style for main actions, such as "Continue to next step."

'secondary': Medium-emphasis style for secondary actions that don't block user progress, such as "Download Shop app."

'plain': Renders the button with a link-like appearance.
Anchor to loading loading boolean Default: false: Whether the button is in a loading state, which replaces the button content with a loading indicator while a background action is being performed. This also disables the button.
Anchor to loadingLabel loadingLabel string: Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading is true.
Anchor to onPress onPress () => void: A callback fired when the button is activated by the user.
Anchor to overlay overlay RemoteFragment: An overlay component to render when the user interacts with the component, such as a popover, modal, or tooltip.
Anchor to to to string: The URL to navigate to when the button is activated. The onPress callback fires first, then navigation occurs.

Anchor to ExamplesExamples

Anchor to Display a resource itemDisplay a resource item

Represent a single object in a collection with associated actions. This example shows a ResourceItem with product details and action buttons in a style consistent with the order index page.

Display a resource item

A resource item representing an order with product details and action buttons

Display a resource item

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>

);

}

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);

}

React

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

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

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: Include product thumbnails or icons alongside text content.
Use a single primary action: If there's one primary action for the object, display it as a primary button. Display other actions as secondary buttons.
Follow UX guidelines: See UX guidelines to learn more about the button logic for order actions.

Anchor to LimitationsLimitations

ResourceItem is designed for collection views. For standalone detail views, use other layout components instead.

Was this page helpful?