Migrate InlineStack from Polaris React

Replace Polaris React InlineStack with s-stack direction="inline". Use s-grid when columns must align across multiple rows.

Anchor to Migrate an inline stackMigrate an inline stack

Migrating inline alignment

<s-stack direction="inline" gap="base" justifyContent="space-between" alignItems="center">

<s-badge tone="success">Active</s-badge>

<s-button>Manage</s-button>

</s-stack>

import {Badge, Button, InlineStack} from '@shopify/polaris';

<Badge tone="success">Active</Badge>

<Button>Manage</Button>

</InlineStack>

Polaris web components

<s-stack direction="inline" gap="base" justifyContent="space-between" alignItems="center">
  <s-badge tone="success">Active</s-badge>
  <s-button>Manage</s-button>
</s-stack>

Polaris React

import {Badge, Button, InlineStack} from '@shopify/polaris';

<InlineStack gap="400" align="space-between" blockAlign="center" wrap>
  <Badge tone="success">Active</Badge>
  <Button>Manage</Button>
</InlineStack>

Preview

Anchor to Replace InlineStack propertiesReplace InlineStack properties

Polaris React	`s-stack`	Migration notes
Inline flow	`direction="inline"`	Keep DOM order aligned with reading order.
`gap`	`gap`, `rowGap`, or `columnGap`	Use documented spacing keywords, not Polaris numeric tokens.
`align`	`justifyContent`	Map start, center, end, and space-between by intent.
`blockAlign`	`alignItems`	Center controls with different intrinsic heights when needed.
`wrap`	No property needed for `wrap={true}`	An inline `s-stack` wraps by default. Use `rowGap`, `columnGap`, and `alignContent` to control spacing and distribution across wrapped lines.
`direction`	Keep logical inline direction	Don't reverse visual order away from DOM order.

Use container-responsive direction to switch a crowded action row to block flow. Shorten labels or move infrequent contextual actions to a menu before forcing primary controls into an unusable row.

Polaris React also allowed wrap={false}. s-stack direction="inline" doesn't expose a no-wrap switch. If wrapping would break the task, use s-grid with explicit tracks or redesign the action hierarchy so the layout remains usable at narrow widths.

Anchor to Test the migrationTest the migration

Test one line and multiple wrapped lines with long translations.
Verify vertical alignment for text, fields, badges, and buttons.
Check focus order and reading order in left-to-right and right-to-left content.
Resize the embedded container and test dynamic children.

Anchor to Remove Polaris ReactRemove Polaris React

Remove InlineStack and token-conversion helpers after each row uses s-stack or a more appropriate grid. Remove @shopify/polaris only after no other route in scope imports it.

Anchor to Related guidanceRelated guidance

Was this page helpful?