Choose a version:

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

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or contents of the element. When set, it will announced to buyers using assistive technologies.
Anchor to accessibilityVisibility accessibilityVisibility: Changes the visibility of the element to assistive technologies.

hidden hides the component from assistive technology (for example, a screen reader) but remains visually visible.
Anchor to icon icon: The name of the icon to be displayed in the badge.
Anchor to iconPosition iconPosition 'start' | 'end' Default: 'start': The position of the icon in relation to the text.
Anchor to size size Extract<, 'base' | 'small'> Default: 'base': The size of the badge being rendered.
Anchor to tone tone Default: 'default': The tone of the badge being rendered. Indicates its level of importance, where subdued provides the least emphasis, while critical indicates the highest level of urgency.
Anchor to visibility visibility: Changes the visibility of the element.

hidden visually hides the component while keeping it accessible to assistive technology, such as screen readers. Hidden elements don't take any visual space contrary to CSS visibility: hidden;

BadgeProps

accessibilityLabel
A label that describes the purpose or contents of the element. When set, it will announced to buyers using assistive technologies.
```
string
```
accessibilityVisibility
Changes the visibility of the element to assistive technologies. `hidden` hides the component from assistive technology (for example, a screen reader) but remains visually visible.
```
AccessibilityVisibility
```
icon
The name of the icon to be displayed in the badge.
```
IconSource
```
iconPosition
The position of the icon in relation to the text.
```
'start' | 'end'
```
size
The size of the badge being rendered.
```
Extract<Size, 'base' | 'small'>
```
tone
The tone of the badge being rendered. Indicates its level of importance, where subdued provides the least emphasis, while critical indicates the highest level of urgency.
```
Tone
```
visibility
Changes the visibility of the element. `hidden` visually hides the component while keeping it accessible to assistive technology, such as screen readers. Hidden elements don't take any visual space contrary to CSS visibility: hidden;
```
Visibility
```

export interface BadgeProps extends VisibilityProps {
  /**
   * The tone of the badge being rendered. Indicates its level of importance,
   * where subdued provides the least emphasis, while critical indicates the highest level of urgency.
   *
   * @default 'default'
   */
  tone?: Tone;
  /**
   * The size of the badge being rendered.
   *
   * @default 'base'
   */
  size?: Extract<Size, 'base' | 'small'>;
  /**
   * A label that describes the purpose or contents of the element. When set,
   * it will announced to buyers using assistive technologies.
   */
  accessibilityLabel?: string;
  /**
   * The name of the icon to be displayed in the badge.
   */
  icon?: IconSource;
  /**
   * The position of the icon in relation to the text.
   *
   * @default 'start'
   */
  iconPosition?: 'start' | 'end';
}

AccessibilityVisibility

'hidden'

IconSource

'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'

Size

'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'

Tone

'default' | 'critical' | 'subdued'

Visibility

'hidden'

Was this section helpful?

Basic Badge

import {

reactExtension,

Badge,

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

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return <Badge>Available</Badge>;

}

examples

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

Preview

Anchor to best-practicesBest Practices

Aim for one word per badge.
For complex states that require 2 words, use sentence case.
For status badge labels, use an adjective (for example, "Available" or "Complete") or a verb in the past tense (for example, "Delivered" or "Delayed")
Use the tone prop to indicate the level of importance. subdued provides the least emphasis, while critical indicates the highest level of urgency.
Write a useful accessibilityLabel so that customers using assistive technology can access the full meaning of the badge in context. For badges with the critical tone, include information that conveys the urgency of the badge (for example, "Warning" or "Alert").
A badge should always be attributed to an object on the page.

Was this section helpful?

Anchor to examplesExamples

Anchor to example-using-the-badge-component-as-a-status-indicatorUsing the Badge component as a status indicator

Was this section helpful?

Using the Badge component as a status indicator

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"

Subscription

</Text>

<Text>Mini garden seeds</Text>

</BlockStack>

<BlockStack

spacing="none"

inlineAlignment="start"

$35.00 monthly

</Text>

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

</BlockStack>

);

}

examples

Using the Badge component as a status indicator

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