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

```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
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
The action grouping for the item, provided as buttons.
### actionAccessibilityLabel
Accessibility label for the action grouping. If an accessibility label is not provided, default text is used.
### actionLabel
Label for the action grouping. If a label is not provided, default text is used.
### 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`.
### onPress
Callback when pressed. If `to` is set, it will execute the callback and then navigate to the location specified by `to`.
### to
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
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
Disables the button, disallowing any interaction.
### 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.
### loading
Replaces content with a loading indicator.
### loadingLabel
Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true.
### onPress
Callback that is run when the button is pressed.
### overlay
An overlay component to render when the user interacts with the component.
### to
Destination URL to link to.