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

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

### 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
  <s-pos-block>
    <s-box paddingBlock="base">
      <s-text>Customer Loyalty</s-text>
    </s-box>
  </s-pos-block>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/pos-block-default.png)

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