Badge

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to 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.

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();

});

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 />),

);

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();
});

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 />),
);

Anchor to PropsProps

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`

Anchor to GuidelinesGuidelines

✅ 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.

Was this page helpful?