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

Anchor to accessibilityLabel 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.
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: Callback when pressed. If to is set, it will execute the callback and then navigate to the location specified by to.
Anchor to to to string: Destination to navigate to. You must provide either this property, onPress, or both.

ResourceItemProps

accessibilityLabel
A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.
```
string
```
action
The action grouping for the item, provided as buttons.
```
RemoteFragment
```
actionAccessibilityLabel
Accessibility label for the action grouping. If an accessibility label is not provided, default text is used.
```
string
```
actionLabel
Label for the action grouping. If a label is not provided, default text is used.
```
string
```
loading
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`.
```
boolean
```
onPress
Callback when pressed. If `to` is set, it will execute the callback and then navigate to the location specified by `to`.
```
() => void
```
to
Destination to navigate to. You must provide either this property, `onPress`, or both.
```
string
```

export interface ResourceItemProps
  extends Pick<LinkProps, 'accessibilityLabel' | 'to' | 'onPress'> {
  /**
   * The action grouping for the item, provided as buttons.
   */
  action?: RemoteFragment;

  /**
   * Label for the action grouping. If a label is not provided, default text is used.
   *
   * @defaultValue "More actions"
   */
  actionLabel?: string;

  /**
   * Accessibility label for the action grouping. If an accessibility label is not provided,
   * default text is used.
   *
   * @defaultValue "More actions"
   */
  actionAccessibilityLabel?: string;

  /**
   * 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`.
   *
   * @defaultValue false
   */
  loading?: boolean;
}

Was this section helpful?

Anchor to buttonprops actionButtonProps action

Supported props for Buttons used inside ResourceItem action prop.

children only support text.

Anchor to accessibilityLabel 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.
Anchor to disabled disabled boolean Default: false: Disables the button, disallowing any interaction.
Anchor to kind 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.
Anchor to loading loading boolean Default: false: Replaces content with a loading indicator.
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: Callback that is run when the button is pressed.
Anchor to overlay overlay RemoteFragment: An overlay component to render when the user interacts with the component.
Anchor to to to string: Destination URL to link to.

Docs_ResourceItem_Button_Action

accessibilityLabel
A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.
```
string
```
disabled
Disables the button, disallowing any interaction.
```
boolean
```
kind
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.
```
'primary' | 'secondary' | 'plain'
```
loading
Replaces content with a loading indicator.
```
boolean
```
loadingLabel
Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true.
```
string
```
onPress
Callback that is run when the button is pressed.
```
() => void
```
overlay
An overlay component to render when the user interacts with the component.
```
RemoteFragment
```
to
Destination URL to link to.
```
string
```

export interface Docs_ResourceItem_Button_Action
  extends Pick<
    ButtonProps,
    | 'onPress'
    | 'overlay'
    | 'to'
    | 'loading'
    | 'loadingLabel'
    | 'disabled'
    | 'accessibilityLabel'
    | 'kind'
  > {}

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>

);

}

examples

ResourceItem

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

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?