Badge

Use badges to highlight contextual information, like a label or a status, about an object. An object can be anything that has a status or label attributed to it, like an order or subscription.

Anchor to BadgePropsBadgeProps

'hidden'

'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowUpRight' | 'arrowDown' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caretDown' | 'cart' | 'cashDollar' | 'categories' | 'checkmark' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'chevronDown' | 'clipboard' | 'clock' | 'close' | 'creditCard' | 'critical' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'email' | 'error' | 'errorFill' | 'external' | 'filter' | 'geolocation' | 'gift' | 'giftFill' | 'grid' | 'hamburger' | 'hollowCircle' | 'horizontalDots' | 'image' | 'info' | 'infoFill' | 'list' | 'lock' | 'magnify' | 'map' | 'marker' | 'minus' | 'mobile' | 'note' | 'orderBox' | 'pen' | 'plus' | 'profile' | 'question' | 'questionFill' | 'reorder' | 'reset' | 'return' | 'savings' | 'settings' | 'star' | 'starFill' | 'starHalf' | 'store' | 'success' | 'truck' | 'upload' | 'verticalDots' | 'warning' | 'warningFill'

'default' | 'critical' | 'subdued'

'hidden'

Anchor to ExamplesExamples

Anchor to Basic BadgeBasic Badge

Basic Badge

Basic Badge

ReactJS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

import {

reactExtension,

Badge,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return <Badge>Available</Badge>;

}

9

1

2

3

4

5

6

7

import {extension, Badge} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {

const badge = root.createComponent(Badge, undefined, 'Available');

root.appendChild(badge);

});

React

import {
  reactExtension,
  Badge,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return <Badge>Available</Badge>;
}

JS

import {extension, Badge} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const badge = root.createComponent(Badge, undefined, 'Available');

  root.appendChild(badge);
});

Anchor to Using the Badge component as a status indicatorUsing the Badge component as a status indicator

Using the Badge component as a status indicator

Using the Badge component as a status indicator

ReactJS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

import {

reactExtension,

Badge,

BlockStack,

Text,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return (

<BlockStack

border="base"

padding="large200"

spacing="base"

borderRadius="large"

>

<BlockStack spacing="none">

<Text size="large" emphasis="bold">

Subscription

</Text>

<Text>Mini garden seeds</Text>

</BlockStack>

<BlockStack

spacing="none"

inlineAlignment="start"

>

<Text emphasis="bold">

$35.00 monthly

</Text>

<Badge tone="subdued">Paused</Badge>

</BlockStack>

</BlockStack>

);

}

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

import {

extension,

Badge,

BlockStack,

Text,

} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {

const container = root.createComponent(

BlockStack,

{

border: 'base',

padding: 'large200',

spacing: 'base',

borderRadius: 'large',

},

[

root.createComponent(BlockStack, {spacing: 'none'}, [

root.createComponent(

Text,

{size: 'large', emphasis: 'bold'},

'Subscription',

),

root.createComponent(Text, undefined, 'Mini garden seeds'),

]),

root.createComponent(

BlockStack,

{spacing: 'none', inlineAlignment: 'start'},

[

root.createComponent(Text, {emphasis: 'bold'}, '$35.00 monthly'),

root.createComponent(Badge, {tone: 'subdued'}, 'Paused'),

],

),

],

);

root.appendChild(container);

});

React

import {
  reactExtension,
  Badge,
  BlockStack,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <BlockStack
      border="base"
      padding="large200"
      spacing="base"
      borderRadius="large"
    >
      <BlockStack spacing="none">
        <Text size="large" emphasis="bold">
          Subscription
        </Text>
        <Text>Mini garden seeds</Text>
      </BlockStack>
      <BlockStack
        spacing="none"
        inlineAlignment="start"
      >
        <Text emphasis="bold">
          $35.00 monthly
        </Text>
        <Badge tone="subdued">Paused</Badge>
      </BlockStack>
    </BlockStack>
  );
}

JS

import {
  extension,
  Badge,
  BlockStack,
  Text,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const container = root.createComponent(
    BlockStack,
    {
      border: 'base',
      padding: 'large200',
      spacing: 'base',
      borderRadius: 'large',
    },
    [
      root.createComponent(BlockStack, {spacing: 'none'}, [
        root.createComponent(
          Text,
          {size: 'large', emphasis: 'bold'},
          'Subscription',
        ),
        root.createComponent(Text, undefined, 'Mini garden seeds'),
      ]),

      root.createComponent(
        BlockStack,
        {spacing: 'none', inlineAlignment: 'start'},
        [
          root.createComponent(Text, {emphasis: 'bold'}, '$35.00 monthly'),
          root.createComponent(Badge, {tone: 'subdued'}, 'Paused'),
        ],
      ),
    ],
  );

  root.appendChild(container);
});

Anchor to Best practicesBest practices

• Keep badge labels short: Aim for one word per badge. For complex states that require two words, use sentence case.

• Use descriptive adjectives or past-tense verbs: Labels like "Paid", "Free", "Expired", or "Processing" communicate status clearly.

• Match tone to urgency: subdued provides the least emphasis, while critical indicates the highest level of urgency. Reserve critical for statuses that require immediate attention.

• Provide an accessibility label for context: Write a useful accessibilityLabel so that buyers using assistive technology can access the full meaning of the badge. For critical badges, include urgency information like "Warning" or "Alert".

• Always attribute badges to an object: A badge should appear alongside the item it describes, such as an order, subscription, or product.