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.

InlineStack

The InlineStack component arranges its children horizontally (along the inline axis) with configurable spacing. Use it to place elements side by side, such as buttons in a row, badges next to text, or icon-label pairs.

For vertical arrangement, use BlockStack.

Support
Targets (46)

Supported targets

Anchor to PropertiesProperties

Props for the InlineStack component, a horizontal layout container that arranges children in a row along the inline axis. Inherits accessibility, sizing, padding, and gap props from shared utilities.

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or label supplied won't be announced to screen readers.

Anchor to accessibilityRole
accessibilityRole
Default: 'generic'

The semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.

Anchor to blockAlignment
blockAlignment
Default: 'start'

The alignment of children along the block (vertical) axis within the stack. Use this to control how children are vertically aligned in a horizontal stack layout.

Anchor to blockGap
blockGap
| boolean

The spacing between children along the block axis (top-to-bottom in horizontal writing modes). This is an alias for rowGap. When set to true, applies a default block gap appropriate for the component.

Anchor to blockSize
blockSize
number | `${number}%`

The block size (height in horizontal writing modes) of the element.

  • number: The size in pixels.
  • `${number}%`: The size as a percentage of the parent container's block size.

Learn more about the block-size property.

Anchor to columnGap
columnGap
| boolean

The spacing between columns (children placed along the inline axis). When set to true, applies a default column gap appropriate for the component.

Learn more about the column-gap property.

Anchor to gap
gap
< | boolean>

The spacing between children in both axes. Accepts a single value for uniform spacing, or two values separated by a space for independent block-axis and inline-axis spacing (such as "base small"). When set to true, applies a default gap appropriate for the component.

Learn more about the gap property.

Anchor to id
id
string

A unique identifier for the element.

Anchor to inlineAlignment
inlineAlignment
Default: 'start'

The alignment of children along the inline (horizontal) axis within the stack. Use this to control how children are horizontally distributed in a horizontal stack layout.

Anchor to inlineGap
inlineGap
| boolean

The spacing between children along the inline axis (left-to-right in horizontal writing modes). This is an alias for columnGap. When set to true, applies a default inline gap appropriate for the component.

Anchor to inlineSize
inlineSize
number | `${number}%`

The inline size (width in horizontal writing modes) of the element.

  • number: The size in pixels.
  • `${number}%`: The size as a percentage of the parent container's inline size.

Learn more about the inline-size property.

Anchor to maxBlockSize
maxBlockSize
number | `${number}%`

The maximum block size (maximum height in horizontal writing modes). The element won't grow taller than this value even if its content is longer.

  • number: The size in pixels.
  • `${number}%`: The size as a percentage of the parent container's block size.

Learn more about the max-block-size property.

Anchor to maxInlineSize
maxInlineSize
number | `${number}%`

The maximum inline size (maximum width in horizontal writing modes). The element won't grow wider than this value.

  • number: The size in pixels.
  • `${number}%`: The size as a percentage of the parent container's inline size.

Learn more about the max-inline-size property.

Anchor to minBlockSize
minBlockSize
number | `${number}%`

The minimum block size (minimum height in horizontal writing modes). The element won't shrink smaller than this value even if its content is shorter.

  • number: The size in pixels.
  • `${number}%`: The size as a percentage of the parent container's block size.

Learn more about the min-block-size property.

Anchor to minInlineSize
minInlineSize
number | `${number}%`

The minimum inline size (minimum width in horizontal writing modes). The element won't shrink narrower than this value.

  • number: The size in pixels.
  • `${number}%`: The size as a percentage of the parent container's inline size.

Learn more about the min-inline-size property.

Anchor to padding
padding
< | boolean>

The padding on all edges of the element, using a shorthand syntax. You can specify one to four values following the CSS shorthand convention.

When set to true, applies a default padding appropriate for the component.

Anchor to paddingBlock
paddingBlock
< | boolean>

The padding on the block-start and block-end edges. When set to true, applies a default block padding appropriate for the component.

Learn more about the padding-block property.

Anchor to paddingBlockEnd
paddingBlockEnd
| boolean

The padding on the block-end edge (the bottom edge in horizontal writing modes). When set to true, applies a default padding appropriate for the component.

Learn more about the padding-block-end property.

Anchor to paddingBlockStart
paddingBlockStart
| boolean

The padding on the block-start edge (the top edge in horizontal writing modes). When set to true, applies a default padding appropriate for the component.

Learn more about the padding-block-start property.

Anchor to paddingInline
paddingInline
< | boolean>

The padding on the inline-start and inline-end edges. When set to true, applies a default inline padding appropriate for the component.

Learn more about the padding-inline property.

Anchor to paddingInlineEnd
paddingInlineEnd
| boolean

The padding on the inline-end edge (the right edge in left-to-right writing modes). When set to true, applies a default padding appropriate for the component.

Learn more about the padding-inline-end property.

Anchor to paddingInlineStart
paddingInlineStart
| boolean

The padding on the inline-start edge (the left edge in left-to-right writing modes). When set to true, applies a default padding appropriate for the component.

Learn more about the padding-inline-start property.

Anchor to rowGap
rowGap
| boolean

The spacing between rows (children stacked along the block axis). When set to true, applies a default row gap appropriate for the component.

Learn more about the row-gap property.

Anchor to ExamplesExamples

Anchor to Arrange metadata in rowsArrange metadata in rows

Arrange metadata labels, values, and badges in a horizontal row. This example uses InlineStack with the gap prop to space product IDs, SKUs, weights, and a status Badge side by side.

Arrange metadata in rows

Arrange metadata labels, values, and badges in a horizontal row. This example uses `InlineStack` with the `gap` prop to space product IDs, SKUs, weights, and a status [Badge](/docs/api/admin-extensions/2025-07/ui-components/feedback-and-status-indicators/badge) side by side.

Arrange metadata in rows

import {reactExtension, useApi, InlineStack, Text, Badge, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {
const {data} = useApi('admin.product-details.block.render');
const productId = data.selected[0]?.id;

return (
<BlockStack gap>
<InlineStack gap>
<Text fontWeight="bold">Product:</Text>
<Text>{productId || 'Unknown'}</Text>
<Badge tone="success">Active</Badge>
</InlineStack>
<InlineStack gap>
<Text fontWeight="bold">SKU:</Text>
<Text>WH-1234</Text>
<Text fontWeight="bold">Weight:</Text>
<Text>2.5 kg</Text>
</InlineStack>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, InlineStack, Text, Badge, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root, api) => {
const {data} = api;
const productId = data.selected[0]?.id;

const stack = root.createComponent(BlockStack, {gap: true});

const row = root.createComponent(InlineStack, {gap: true});
const label = root.createComponent(Text, {fontWeight: 'bold'}, 'Product:');
const id = root.createComponent(Text, {}, productId || 'Unknown');
const badge = root.createComponent(Badge, {tone: 'success'}, 'Active');
row.appendChild(label);
row.appendChild(id);
row.appendChild(badge);

const metaRow = root.createComponent(InlineStack, {gap: true});
const skuLabel = root.createComponent(Text, {fontWeight: 'bold'}, 'SKU:');
const skuValue = root.createComponent(Text, {}, 'WH-1234');
const weightLabel = root.createComponent(Text, {fontWeight: 'bold'}, 'Weight:');
const weightValue = root.createComponent(Text, {}, '2.5 kg');
metaRow.appendChild(skuLabel);
metaRow.appendChild(skuValue);
metaRow.appendChild(weightLabel);
metaRow.appendChild(weightValue);

stack.appendChild(row);
stack.appendChild(metaRow);
root.appendChild(stack);
},
);

Anchor to Right-align action buttonsRight-align action buttons

Right-align action buttons using inlineAlignment="end". This example positions cancel and confirm Button components at the trailing edge of an action modal, following standard dialog patterns.

Right-align action buttons

import {reactExtension, useApi, InlineStack, Button, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {
const {data, close} = useApi('admin.product-details.action.render');
const productId = data.selected[0]?.id;

return (
<BlockStack gap>
<Text fontWeight="bold">Confirm action</Text>
<Text>Sync product {productId} to all warehouse locations?</Text>
<InlineStack gap inlineAlignment="end">
<Button variant="tertiary" onPress={() => close()}>Cancel</Button>
<Button
variant="primary"
onPress={async () => {
await fetch('/api/products/sync-all', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({productId}),
});
close();
}}
>
Sync now
</Button>
</InlineStack>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.action.render',
() => <App />,
);
import {extension, InlineStack, Button, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.action.render',
(root, api) => {
const {data, close} = api;
const productId = data.selected[0]?.id;

const stack = root.createComponent(BlockStack, {gap: true});

const heading = root.createComponent(Text, {fontWeight: 'bold'}, 'Confirm action');
const message = root.createComponent(Text, {}, `Sync product ${productId} to all warehouse locations?`);

const actions = root.createComponent(InlineStack, {
gap: true,
inlineAlignment: 'end',
});

const cancelButton = root.createComponent(
Button,
{variant: 'tertiary', onPress: () => close()},
'Cancel',
);
const confirmButton = root.createComponent(
Button,
{
variant: 'primary',
onPress: async () => {
await fetch('/api/products/sync-all', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({productId}),
});
close();
},
},
'Sync now',
);

actions.appendChild(cancelButton);
actions.appendChild(confirmButton);

stack.appendChild(heading);
stack.appendChild(message);
stack.appendChild(actions);
root.appendChild(stack);
},
);

Anchor to Center-align icon and text pairsCenter-align icon and text pairs

Vertically center Icon and text pairs using blockAlignment="center". This example places order and inventory icons inline with their stat labels, so they stay aligned regardless of icon and text height differences.

Center-align icon and text pairs

import {reactExtension, InlineStack, Icon, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (
<BlockStack gap>
<Text fontWeight="bold">Quick stats</Text>
<InlineStack gap blockAlignment="center">
<Icon name="OrdersMajor" accessibilityLabel="Orders" />
<Text>142 orders this month</Text>
</InlineStack>
<InlineStack gap blockAlignment="center">
<Icon name="InventoryMajor" accessibilityLabel="Inventory" />
<Text>89 units in stock</Text>
</InlineStack>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, InlineStack, Icon, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root) => {

const stack = root.createComponent(BlockStack, {gap: true});

const heading = root.createComponent(Text, {fontWeight: 'bold'}, 'Quick stats');

const stat1 = root.createComponent(InlineStack, {
gap: true,
blockAlignment: 'center',
});
const icon1 = root.createComponent(Icon, {name: 'OrdersMajor', accessibilityLabel: 'Orders'});
const text1 = root.createComponent(Text, {}, '142 orders this month');
stat1.appendChild(icon1);
stat1.appendChild(text1);

const stat2 = root.createComponent(InlineStack, {
gap: true,
blockAlignment: 'center',
});
const icon2 = root.createComponent(Icon, {name: 'InventoryMajor', accessibilityLabel: 'Inventory'});
const text2 = root.createComponent(Text, {}, '89 units in stock');
stat2.appendChild(icon2);
stat2.appendChild(text2);

stack.appendChild(heading);
stack.appendChild(stat1);
stack.appendChild(stat2);
root.appendChild(stack);
},
);

Anchor to Best practicesBest practices

  • Use for horizontal grouping: InlineStack is ideal for placing buttons, badges, icons, or other small elements in a row. For vertical stacking, use BlockStack instead.

Anchor to LimitationsLimitations

  • InlineStack doesn't support explicit column counts or grid-like layouts. For more complex grid arrangements, nest BlockStack and InlineStack components together.
  • InlineStack doesn't render any visible background, border, or shadow. It's purely a layout container. For visual containment, wrap it in a Box or Section.
  • Children that are wider than the container will overflow. InlineStack doesn't automatically resize children to fit.
Was this page helpful?