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.

Anchor to PropertiesProperties

Configure the following properties on the posBlock component.

Anchor to SlotsSlots

The posBlock component supports slots for additional content placement within the block. Learn more about using slots.

Anchor to ExamplesExamples

Anchor to Create a content block with an action buttonCreate 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

Create a content block with an action button

Copy

9

1

2

3

4

5

<s-pos-block>

<s-box paddingBlock="base">

<s-text>Customer Loyalty</s-text>

</s-box>

</s-pos-block>

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