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

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

```

## ResourceItemProps

### ResourceItemProps

### accessibilityLabel

value: `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

value: `RemoteFragment`

The action grouping for the item, provided as buttons.

### actionAccessibilityLabel

value: `string`

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

### actionLabel

value: `string`

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

### loading

value: `boolean`

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

value: `() => void`

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

### to

value: `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.<br><br>`children` only support text.

### Docs_ResourceItem_Button_Action

### accessibilityLabel

value: `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

value: `boolean`

Disables the button, disallowing any interaction.

### kind

value: `'primary' | 'secondary' | 'plain'`

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

value: `boolean`

Replaces content with a loading indicator.

### loadingLabel

value: `string`

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

### onPress

value: `() => void`

Callback that is run when the button is pressed.

### overlay

value: `RemoteFragment`

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

### to

value: `string`

Destination URL to link to.