The documentation for WooCommerce Blocks has moved to the WooCommerce monorepo.
Please refer to the documentation in the new location as the files in this repository will no longer be updated and the repository will be archived.
This component can be used to show an item styled as a "tag", optionally with an X
+ "remove"
or with a popover that is shown on click.
<Tag label="My tag" id={ 1 } />
<Tag label="Removable tag" id={ 2 } remove={ noop } />
<Tag label="Tag with popover" popoverContents={ ( <p>This is a popover</p> ) } />
Name | Type | Default | Description |
---|---|---|---|
id |
One of type: number, string | null |
The ID for this item, used in the remove function |
label |
String | null |
(required) The name for this item, displayed as the tag's text |
popoverContents |
ReactNode | null |
Contents to display on click in a popover |
remove |
Function | null |
A function called when the remove X is clicked. If not used, no X icon will display |
screenReaderLabel |
String | null |
A more descriptive label for screen reader users. Defaults to the name prop |
We're hiring! Come work with us!
🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.