Migrate InlineCode from Polaris React

Use a native code element for inline code and identifiers. Preserve surrounding sentence semantics and add a preformatted container only for code blocks.

Anchor to Choose the destinationChoose the destination

Anchor to Map inline codeMap inline code

The native code element provides the semantics. Any s-box, stack, background, border radius, or padding in an example is optional visual composition, not part of the replacement API. Add those only when the surrounding design needs a distinct code treatment, and keep the code element itself around the literal value.

Anchor to Migrate the call siteMigrate the call site

1. Choose the native element whose semantics match the InlineCode call site.

2. Rebuild its accessible name and relationships before adding layout or app-owned styling.

3. When the element is interactive or form-associated, connect its native events and form behavior to existing app state.

4. After verification, remove the InlineCode import and any Polaris-only state, wrappers, or helpers that no longer have a caller.

Anchor to Preserve these behaviorsPreserve these behaviors

• Native semantics, accessible names, and document structure.
• Keyboard and form behavior supplied by the browser, where applicable.
• App state, validation, and responsive layout around the element.

Anchor to Test and remove Polaris ReactTest and remove Polaris React

Test the migrated InlineCode with browser and accessibility semantics in mind. Verify document structure, keyboard and form behavior where applicable, accessible relationships, and app-owned state changes.

Don't remove @shopify/polaris while another component still imports it. Once all call sites are migrated, remove the package and its provider-level setup, then run the app's full test suite.

Anchor to Migration exampleMigration example

export function InlineCodeMigrationExample() {
  return (
    <s-stack direction="inline">
      <s-box background="strong" borderRadius="small" padding="small-100 small">
        <code>product.status</code>
      </s-box>
    </s-stack>
  );
}

import {InlineCode} from '@shopify/polaris';


export function InlineCodeMigrationExample() {

  return (
    <InlineCode>product.status</InlineCode>
  );
}