---
title: POSBlockRow
description: >-
  The POSBlockRow component renders individual rows within a POSBlock container.
  Use it to create structured content rows with optional tap interactions inside
  POSBlock components.


  The component follows Shopify's design system specifications to ensure visual
  consistency across the POS interface. It includes built-in support for
  different device sizes and orientations, providing a reliable and familiar
  experience for merchants across various retail environments and use cases.


  POSBlockRow components handle edge cases and loading states gracefully,
  providing clear feedback during operations and maintaining interface
  responsiveness even when processing intensive tasks or handling large
  datasets.
api_version: 2024-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/ui-components/layout-and-structure/posblockrow
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/ui-components/layout-and-structure/posblockrow.md
---

# POSBlock​Row

The POSBlockRow component renders individual rows within a POSBlock container. Use it to create structured content rows with optional tap interactions inside POSBlock components.

The component follows Shopify's design system specifications to ensure visual consistency across the POS interface. It includes built-in support for different device sizes and orientations, providing a reliable and familiar experience for merchants across various retail environments and use cases.

POSBlockRow components handle edge cases and loading states gracefully, providing clear feedback during operations and maintaining interface responsiveness even when processing intensive tasks or handling large datasets.

### Support Targets (10)

### Supported targets

* [pos.​customer-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/customer-details#customer-details-action-modal-)
* [pos.​customer-details.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/customer-details#customer-details-targets)
* [pos.​draft-order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/draft-order-details#draft-order-details-action-modal-)
* [pos.​home.​modal.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/home-screen#home-screen-action-modal-)
* [pos.​order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/order-details#order-details-action-modal-)
* [pos.​order-details.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/order-details#order-details-targets)
* [pos.​product-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/product-details#product-details-action-modal-)
* [pos.​product-details.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/product-details#product-details-targets)
* [pos.​purchase.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/post-purchase#post-purchase-action-modal-)
* [pos.​purchase.​post.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/post-purchase#post-purchase-targets)

#### Use cases

* **Content rows:** Create individual content rows within POSBlock containers.
* **Interactive rows:** Add interactive functionality to specific rows through tap callbacks.
* **Consistent layouts:** Structure content with consistent row-based layouts.
* **User interactions:** Provide user interaction points that trigger actions or navigation.

## Examples

### Create structured rows within a block

Display individual rows within a POSBlock container with optional tap interactions. This example demonstrates creating structured content rows that follow POS design specifications, ensuring visual consistency and proper handling of various device sizes and orientations.

## Create structured rows within a block

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2024-10/pos-block-row-default-ToCzOfbt.png)

### Examples

* #### Create structured rows within a block

  ##### Description

  Display individual rows within a POSBlock container with optional tap interactions. This example demonstrates creating structured content rows that follow POS design specifications, ensuring visual consistency and proper handling of various device sizes and orientations.

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    useApi,
    POSBlock,
    POSBlockRow,
    Text,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const PostPurchaseBlock = () => {
    const api =
      useApi<'pos.purchase.post.block.render'>();

    return (
      <POSBlock>
        <POSBlockRow>
          <Text>Hello, world!</Text>
        </POSBlockRow>
      </POSBlock>
    );
  };

  export default reactExtension(
    'pos.purchase.post.block.render',
    () => <PostPurchaseBlock />,
  );
  ```

  ##### TS

  ```ts
  import {
    POSBlock,
    POSBlockRow,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.purchase.post.block.render',
    (root, api) => {
      const posBlock =
        root.createComponent(POSBlock);

      const posBlockRow =
        root.createComponent(POSBlockRow);

      const text = root.createText('Hello, world!');

      posBlockRow.append(text);
      posBlock.append(posBlockRow);
      root.append(posBlock);
    },
  );
  ```

## Properties

Configure the following properties on the POSBlockRow component.

* **onPress**

  **() => void**

  A callback function executed when the user taps the row. Use this to handle row-specific interactions or navigation.

## Best practices

* **Organize content logically within rows:** Structure your POSBlockRow content to be scannable and focused. Each row should represent a discrete piece of information or functionality that users can easily understand and interact with.
* **Provide visual feedback for interactive rows:** When rows are interactive (have `onPress` callbacks), ensure users understand they can be tapped.
* **Keep row content concise and focused:** Design row content to be easily readable and actionable within the constrained space of a POSBlock. Focus on the most important information and avoid cluttering rows with excessive detail.
* **Maintain consistent interaction patterns:** Use similar `onPress` behaviors across different POSBlockRow instances in your extension to create predictable user experiences. Consistent interaction patterns help merchants understand and trust your extension.

## Limitations

* POSBlockRow can only be used as children of POSBlock components—it can't be used independently or within other container types.
* The component's visual styling and layout are controlled by the POS design system—custom row styling beyond content organization isn't supported.
* Row content is provided through child components rather than direct content properties—organize your row content through component composition.
* Interactive behavior is limited to the `onPress` callback—complex interactions or multiple actions for each row require custom implementation within the row content.