---
title: POSBlock
description: >-
  The POSBlock component creates a container to place content with an action
  button. Use it to display structured content within POS block targets.


  The component provides a standardized layout specifically designed for content
  blocks within POS detail views, with consistent padding, spacing, and optional
  action buttons. It integrates with the native POS design language, ensuring
  extension content feels cohesive with the core POS interface while maintaining
  clear content boundaries.


  POSBlock components provide consistent interaction patterns for action buttons
  across different block types, ensuring merchants can predict button behavior
  and location regardless of the specific POS context.
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/posblock
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/ui-components/layout-and-structure/posblock.md
---

# POSBlock

The POSBlock component creates a container to place content with an action button. Use it to display structured content within POS block targets.

The component provides a standardized layout specifically designed for content blocks within POS detail views, with consistent padding, spacing, and optional action buttons. It integrates with the native POS design language, ensuring extension content feels cohesive with the core POS interface while maintaining clear content boundaries.

POSBlock components provide consistent interaction patterns for action buttons across different block types, ensuring merchants can predict button behavior and location regardless of the specific POS context.

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

* **Customer information:** Display customer information, loyalty status, or account details.
* **Order summaries:** Show order summaries, transaction details, or fulfillment information.
* **Product recommendations:** Present product recommendations, inventory status, or related items.
* **Contextual actions:** Provide contextual actions that enhance core POS functionality.

## Examples

### Show content in a block container

Display structured content within POS block targets using a standardized container. This example demonstrates a POSBlock with consistent padding, spacing, and an optional action button, ensuring extension content feels cohesive with the core POS interface.

## Show content in a block container

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

### Examples

* #### Show content in a block container

  ##### Description

  Display structured content within POS block targets using a standardized container. This example demonstrates a POSBlock with consistent padding, spacing, and an optional action button, ensuring extension content feels cohesive with the core POS interface.

  ##### React

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

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

    return (
      <POSBlock
        action={{
          title: 'A toast message',
          onPress: () => {
            api.Toast.show('A toast message');
          },
        }}
      />
    );
  };

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

  ##### TS

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

  export default extension(
    'pos.purchase.post.block.render',
    (root, api) => {
      const posBlock = root.createComponent(
        POSBlock,
        {
          action: {
            title: 'A toast message',
            onPress: () => {
              api.Toast.show('A toast message');
            },
          },
        },
      );

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

## Properties

Configure the following properties on the POSBlock component.

* **action**

  **{ title: string; disabled?: boolean; onPress: () => void; }**

  An optional action button configuration to be displayed on the POSBlock.

## Best practices

* **Design meaningful action buttons:** When providing an action, use clear and descriptive button titles that indicate exactly what will happen when pressed. Avoid generic terms like "Click here" in favor of specific actions like "View Details" or "Update Status."
* **Handle action states appropriately:** Use the disabled property to prevent user interaction when actions are not available or appropriate. Provide clear feedback through your extension's description or other UI elements when actions are disabled.
* **Design for the block context:** POSBlock appears within existing POS screens alongside other content.
* **Implement responsive action callbacks:** Consider showing loading states or confirmation messages when actions require network requests or significant processing time.
* **Maintain consistent action patterns:** Use similar action patterns across different POSBlock instances in your extension to create predictable user experiences. Consistent button titles and behaviors help merchants understand and trust your extension.

## Limitations

* POSBlock is designed specifically for block targets—it can't be used in modal or action (menu item) targets.
* The component's visual styling and layout are controlled by the POS design system—custom styling isn't supported.
* Content display is determined by the extension's description rather than custom content properties—ensure your extension description is clear and informative.
* Only one action button is supported for each POSBlock instance to maintain clean, focused interfaces that integrate well with existing POS workflows.