Skip to main content

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;

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

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

Preview