--- 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. api_version: 2025-10 api_name: pos-ui-extensions source_url: html: >- https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/posblock md: >- https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/posblock.md --- # Pos​Block 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. Support Targets (18) ### Supported targets * [pos.​cart.​line-item-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/cart-details#cart-details-action-modal-) * [pos.​customer-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/customer-details#customer-details-action-modal-) * [pos.​customer-details.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/customer-details#customer-details-block-) * [pos.​draft-order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/draft-order-details#draft-order-details-action-modal-) * [pos.​draft-order-details.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/draft-order-details#draft-order-details-block-) * [pos.​exchange.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-exchange#post-exchange-action-modal-) * [pos.​exchange.​post.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-exchange#post-exchange-block-) * [pos.​home.​modal.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/home-screen#home-screen-action-modal-) * [pos.​order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/order-details#order-details-action-modal-) * [pos.​order-details.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/order-details#order-details-block-) * [pos.​product-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/product-details#product-details-action-modal-) * [pos.​product-details.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/product-details#product-details-block-) * [pos.​purchase.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-purchase#post-purchase-action-modal-) * [pos.​purchase.​post.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-purchase#post-purchase-block-) * [pos.​receipt-footer.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/receipts#receipt-block-footer-) * [pos.​receipt-header.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/receipts#receipt-block-header-) * [pos.​return.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-return#post-return-action-modal-) * [pos.​return.​post.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-return#post-return-block-) #### Use cases * **Customer information:** Display customer info, loyalty status, or account details. * **Order summaries:** Show order details, transaction info, or fulfillment status. * **Product recommendations:** Present recommendations, inventory status, or related items. * **Contextual content:** Provide actions and information that enhance core POS functionality. ## Examples ### Create a content block with an action button Create structured content blocks using a `PosBlock` component with optional action buttons. This example shows a basic block with content and an action button. ## Create a content block with an action button ![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/pos-block-default.png) ### Examples * #### Create a content block with an action button ##### Description Create structured content blocks using a \`PosBlock\` component with optional action buttons. This example shows a basic block with content and an action button. ##### Default ```html Customer Loyalty ``` ## Properties Configure the following properties on the `PosBlock` component. * heading string A title that describes the content of the section. If omitted and no secondary actions are provided, the section will be rendered without a header. * id string A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features. ## QR Code The `PosBlock` component renders a QR code when the block is used within a receipt target. * content string The content to be encoded in the QR code. This can be any string such as a URL, email address, plain text, or other data. Specific string formatting can trigger actions on the user's device when scanned, like opening geolocation coordinates on a map, opening a preferred app or app store entry, preparing an email, text message, and more. * id string A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features. ## Slots The `PosBlock` component supports slots for additional content placement within the block. Learn more about [using slots](https://shopify.dev/docs/api/polaris/using-polaris-web-components#slots). * secondary-actions HTMLElement The secondary actions to perform, provided as button or link type elements. Use the `slot="secondary-actions"` attribute to place interactive elements that allow users to take actions related to the block's content. ## Best practices * **Provide descriptive headings:** If you don't specify a heading, the system uses your extension's description, so ensure it's meaningful and concise. * **Place important actions in secondary-actions slot:** Include only the most relevant actions directly related to your block's content. * **Limit secondary actions:** To maintain clean, focused interfaces that don't overwhelm the existing POS workflow, use only one secondary action element in each block.