Skip to main content

Badge
component

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

Anchor to badgeBadge

Anchor to text
text
string
required

The text displayed inside the badge.

Anchor to variant
variant
required

The appearance and function of the badge.

Anchor to status
status

A circle icon displaying the status of the badge.

Deprecated

No longer supported as of POS 10.0.0.

Was this section helpful?

Badge

import React from 'react';
import {
Badge,
Screen,
reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
return (
<Screen title="Home" name="Home">
<Badge
text="Badge"
variant="success"
status="complete"
/>
</Screen>
);
};

export default reactExtension(
'pos.home.modal.render',
() => <SmartGridModal />,
);

Preview

Anchor to guidelinesGuidelines

  • Badges should be positioned as close as possible to the item they’re related to.
Was this section helpful?

Anchor to content-guidelinesContent guidelines

  • Be concise. Use a single word to describe the status of an item.
  • Only use two or three words if you need to describe a complex state, for example "partially fulfilled".

✅ fulfilled ❌ order fulfilled

Statuses should ideally be written as adjectives:

✅ unpaid ❌ payment not received

Was this section helpful?