Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

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 (16)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the POSBlock component.

Anchor to action
action
{ title: string; disabled?: boolean; onPress: () => void; }

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

Anchor to ExamplesExamples

Anchor to Show content in a block containerShow 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

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

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 />,
);
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);
},
);

Anchor to Best practicesBest 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.

Anchor to LimitationsLimitations

  • 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.
Was this page helpful?