---
title: Badge
description: Badges are used to inform merchants of the status of an object, or the status of an action that’s been taken.
api_name: product-subscription-extensions
source_url:
  html: https://shopify.dev/docs/api/product-subscription-extensions/components/badge
  md: https://shopify.dev/docs/api/product-subscription-extensions/components/badge.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/badge#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/badge#guidelines)

# Badge

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

Badges are used to inform merchants of the status of an object, or the status of an action that’s been taken.

```ts
import {extend, Badge} from '@shopify/admin-ui-extensions';


extend('Playground', (root) => {
  const badge = root.createComponent(Badge, {
    message: 'Example message',
    status: 'success',
  });


  root.appendChild(badge);
  root.mount();
});
```

```jsx
import React from 'react';
import {extend, render, Badge} from '@shopify/admin-ui-extensions-react';


function App() {
  return <Badge message="Example message" status="success" />;
}


extend(
  'Playground',
  render(() => <App />),
);
```

##### JavaScript

```
import {extend, Badge} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const badge = root.createComponent(Badge, {
    message: 'Example message',
    status: 'success',
  });

  root.appendChild(badge);
  root.mount();
});
```

##### React

```
import React from 'react';
import {extend, render, Badge} from '@shopify/admin-ui-extensions-react';

function App() {
  return <Badge message="Example message" status="success" />;
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| message | `string` | The content to display inside the badge. |
| status? | `"success" \| "info" \| "attention" \| "warning" \| "new"` | Set the colour of the badge for the given status. Default value: `none` |

***

## Guidelines

| ✅ Do | 🛑 Don't |
| - | - |
| Use Badges to display the status of an object | Use Badges without context, or as singular objects |
| Use Badges to represent discrete information | |
| Have clear and helpful relationship to the content or task they represent | |
| Badges can be stacked horizontally | |

For more guidelines, refer to Polaris' [Badge best practices](https://polaris.shopify.com/components/feedback-indicators/badge#best-practices).

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/badge#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/badge#guidelines)