UNPKG

@shopify/polaris

Version:

Shopify’s product component library

github.com/Shopify/polaris

Shopify/polaris

101 lines (70 loc) • 2.29 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
--- name: Link category: Navigation keywords: - URL - linklist - link list - embed - actions - pathways - deep link - text link - plain button - plain call to action - plain cta - embeddd action - action in text - hyperlink - secondary actions - secondary cta - secondary call to action --- # Link Links are used to embed actions or pathways to more information in a sentence. --- ## Purpose Think about the merchant problem this component solves when you’re using it: ### Problem Merchants need to be able to navigate to other sections of Shopify or take actions wherever they are in the interface. ### Solution Links provide merchants with a way to navigate or take an action in the context of a string of content. --- ## Best practices Links should: - Consist of text that clearly describes either the action that the merchant will take or the location they’ll navigate to. - Only be used in a sentence. For stand-alone navigational actions, [use the button component](/components/actions/button) --- ## Content guidelines ### Links Links should: - Set the expectation of where the merchant will be taken or what action will be performed. - Be consistent with the content they point to. If a navigational link leads to a page called Orders, label the link “orders”. - Use descriptive text and avoid using generic content such as “click here”. <!-- usageblock --> #### Do Learn more about <a>fulfilling orders</a> at the Shopify Help Center #### Don’t <a>Click here</a> to learn more about fulfilling orders <!-- end --> <!-- usagelist --> #### Do Orders #### Don’t To orders section <!-- end --> | Properties | Type | Description | | ---------- | ---- | ----------- | | url | string | The url to link to. | | children | string or React.ReactNode | The content to display inside link | | external | boolean | Use for a links that open a different site | | onClick | function() | Callback when a link is clicked | ## Examples ### Default links Use for text links in larger spans of text. ```jsx <Link url="https://help.shopify.com/manual">fulfilling orders</Link> ``` --- ## Related components * To create navigational actions that aren’t part of a line of text, [use the button component](/components/button)