Tag
A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart.
Anchor to tagpropsTagProps
Anchor to accessibilityLabel
accessibilityLabel
string
A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.
Anchor to children
children
string
Anchor to icon
icon
Icon source
string
A unique identifier for the component.
Anchor to onRemove
onRemove
() => void
Callback when tag is removed
Was this section helpful?
Basic Tag
import {
reactExtension,
Tag,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
return <Tag icon="discount">SPRING</Tag>;
}
Preview
