---
title: Migrate CalloutCard from Polaris React
description: Learn how to migrate Polaris React CalloutCard to Polaris web components.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/callout-card
  md: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/callout-card.md
api_name: app-home
---

# Migrate Callout​Card from Polaris React

Use the callout card pattern for a focused recommendation with a clear action. If the content is ordinary page information, use a section instead of preserving the promotional treatment.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `CalloutCard` | [Callout card pattern](https://shopify.dev/docs/api/app-home/patterns/compositions/callout-card) | Pattern |

***

## Map the callout card

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `title` | `s-heading` | Keep a short recommendation as the heading. |
| `illustration` | `s-image` | Use meaningful `alt` text, or an empty value for a decorative image. |
| `primaryAction` and `secondaryAction` | Explicit buttons or links | Reconnect loading, disabled, success, and error behavior instead of passing action descriptors. |

***

## Migrate the call site

1. Trace the complete feature around `CalloutCard`, including any data, state, actions, loading, empty, and error paths it has.

2. Implement the linked Polaris web components pattern as one coherent feature.

3. Reconnect app-owned state and backend operations, then migrate the old feature as a single slice.

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

***

## Preserve these behaviors

* The data and state that determine what the feature displays.
* User actions, confirmation, and recovery behavior that apply to the feature.
* Relevant loading, empty, error, and responsive states.

***

## Test and remove Polaris React

Test the complete migrated `CalloutCard` feature with realistic data. Exercise each state transition and action result, including the loading, empty, error, and responsive paths that apply.

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.

***

## Migration example

## Migrating CalloutCard

##### Polaris web components

```tsx
export function CalloutCardMigrationExample() {
  return (
    <><s-section heading="Grow your business"><s-paragraph>Advertise on social media.</s-paragraph><s-button>Get started</s-button></s-section></>
  );
}
```

##### Polaris React

```tsx
import {CalloutCard} from '@shopify/polaris';


export function CalloutCardMigrationExample() {

  return (
    <CalloutCard
      title="Grow your business"
      illustration=""
      primaryAction={{content: 'Get started', onAction: () => {}}}
    >
      <p>Advertise on social media.</p>
    </CalloutCard>
  );
}
```

***