---
title: Migrate InlineStack from Polaris React
description: >-
  Replace Polaris React InlineStack with s-stack direction inline and map
  spacing, alignment, distribution, and responsive flow.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/inline-stack
  md: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/inline-stack.md
api_name: app-home
---

# Migrate Inline​Stack from Polaris React

Replace Polaris React `InlineStack` with [`s-stack direction="inline"`](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/stack). Use `s-grid` when columns must align across multiple rows.

***

## Migrate an inline stack

## Migrating inline alignment

##### Polaris web components

```html
<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

```tsx
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>
```

***

## Replace Inline​Stack 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.

***

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

***

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

***

## Related guidance

* [Stack component](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/stack)
* [Migrate Grid from Polaris React](https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/grid)

***