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 childrenchildrenstring
- Anchor to iconicon
Icon source
- Anchor to accessibilityLabelaccessibilityLabelstring
A label used for buyers using assistive technologies. When set, any
childrensupplied to this component will not be announced to screen reader users.- Anchor to onRemoveonRemove() => void
Callback when tag is removed
- string
A unique identifier for the component.
TagProps
- children
string - icon
Icon source
IconSource - accessibilityLabel
A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.
string - onRemove
Callback when tag is removed
() => void - id
A unique identifier for the component.
string
export interface TagProps extends IdProps {
children?: string;
/**
* Icon source
*/
icon?: IconSource;
/**
* A label used for buyers using assistive technologies. When set, any
* `children` supplied to this component will not be announced to screen reader users.
*/
accessibilityLabel?: string;
/**
* Callback when tag is removed
*/
onRemove?(): void;
}IconSource
'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowUpRight' | 'arrowDown' | 'bag' | 'calendar' | 'camera' | 'caretDown' | 'cart' | 'checkmark' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'chevronDown' | 'clock' | 'close' | 'critical' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'email' | 'error' | 'errorFill' | 'external' | 'filter' | 'geolocation' | 'gift' | 'giftFill' | 'grid' | 'hamburger' | 'hollowCircle' | 'horizontalDots' | 'info' | 'infoFill' | 'list' | 'lock' | 'magnify' | 'map' | 'marker' | 'minus' | 'mobile' | 'note' | 'orderBox' | 'pen' | 'plus' | 'profile' | 'question' | 'questionFill' | 'reorder' | 'return' | 'store' | 'success' | 'truck' | 'verticalDots' | 'warning' | 'warningFill'Was this section helpful?
Basic Tag
import {render, Tag} from '@shopify/checkout-ui-extensions-react';
render('Checkout::Dynamic::Render', () => <Extension />);
function Extension() {
return <Tag icon="discount">SPRING</Tag>;
}
examples
Basic Tag
React
import {render, Tag} from '@shopify/checkout-ui-extensions-react'; render('Checkout::Dynamic::Render', () => <Extension />); function Extension() { return <Tag icon="discount">SPRING</Tag>; }JS
import {extend, Tag} from '@shopify/checkout-ui-extensions'; extend('Checkout::Dynamic::Render', (root) => { const tag = root.createComponent(Tag, {icon: 'discount'}, 'SPRING'); root.appendChild(tag); });
Preview
