UNPKG

@hackplan/polaris

Version:

Shopify’s product component library

github.com/Shopify/polaris-react

Shopify/polaris-react

66 lines (42 loc) • 1.28 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
--- name: Tag category: Forms platforms: - android - ios - web keywords: - indicator - label - label objects - organize objects - categorize objects - categories - keywords --- # Tag Tags represent a set of interactive, merchant-supplied keywords that help label, organize, and categorize objects. Tags can be added or removed from an object by merchants. --- ## Best practices Tags should: - Be presented close to or within the input control that allows merchants to add and remove tags --- ## Content guidelines Tags are either automatically generated or are created by merchants. There are no specific content guidelines for creating them. --- ## Examples ### Default tag Use to allow merchants to add attributes to, and remove attributes from, an object. ```jsx <Tag>Wholesale</Tag> ``` <!-- content-for: android --> ![Tag for Android](/public_images/components/Tag/android/default@2x.png) <!-- /content-for --> <!-- content-for: ios --> ![Tag for iOS](/public_images/components/Tag/ios/default@2x.png) <!-- /content-for --> --- ## Related components - To show the status of an object, [use the badge component](/components/images-and-icons/badge) - To add and remove tags, [use the text field component](/components/forms/text-field)