होम कंपोनेंटलिंक

लिंक

वह टेक्स्ट जो कहीं ले जाता है, वाक्य के भीतर एक वाक्यांश के रूप में, अपनी अलग पंक्ति के रूप में, या अकेले ग्लिफ़ के रूप में। यह जहाँ रखा हो वहाँ के टेक्स्ट स्टाइल में बनता है, इसकी अंडरलाइन आपके डिज़ाइन सिस्टम के चुनाव के अनुसार बनती है, और जहाँ यह साइट से बाहर ले जाता है वहाँ इस पर निशान लगता है।

अंतिम अपडेट: 23 अक्टूबर 2026

content_copy

Markdown में देखें

श्रेणी: नेविगेशन
टोकन: comp.link
स्तर: आधार

अवलोकन

Web: tanrei-link; schedule
SwiftUI: TanreiLink; radio_button_unchecked
Jetpack Compose: TanreiLink; radio_button_unchecked
Flutter: TanreiLink; radio_button_unchecked
React Native: Link; radio_button_unchecked

इससे जनरेट किया गया: docs/status/status.json, specs/link.spec.json

वाक्य के भीतर, अकेला, और सिर्फ़ ग्लिफ़

टोकन हर प्लैटफ़ॉर्म के लिए जनरेट होते हैं। पढ़ें कि टोकन कैसे डिराइव होते हैं, या सोर्स कोड देखें।

आगे: बटन

एक नियम, जिसे प्रॉडक्ट बिना किसी टेबल के लागू कर सकता है: जिसका कोई पता है वह लिंक है; जिसका कोई पता नहीं वह बटन है। जो कंट्रोल पेज पर कुछ करता है और कहीं नहीं ले जाता, वह बटन है, और जहाँ उसे टेक्स्ट जितना हल्का दिखना हो वहाँ text वेरिएंट। जिस गंतव्य को बटन जैसा दिखना हो, वह href वाला बटन है।

इस्तेमाल

वेब पर लिंक कोई एलिमेंट नहीं, आपके अपने ऐंकर पर लगी एक क्लास है। ऐंकर दस्तावेज़ में ही है, इसलिए वह किसी स्क्रिप्ट के चलने से पहले ही लिंक है, और क्रॉलर, खोज का इंडेक्स और पेज के ऐंकर पर काम करने वाला राउटर, सब उसे पा लेते हैं। राउटर का अपना लिंक कंपोनेंट यह क्लास लेता है। .tanrei-prose के भीतर का हर ऐंकर बिना क्लास के उसी तरह बनता है, इसलिए रेंडर किए गए Markdown को कुछ नहीं चाहिए।

SwiftUI, Compose, Flutter और React Native नियोजित हैं: इस पेज के शुरू में हर प्लैटफ़ॉर्म के साथ दिए गए नाम वे हैं जो स्पेक उन्हें देता है, और वहाँ अभी कुछ उपलब्ध नहीं है। React में भी अभी Link कंपोनेंट नहीं है, इसलिए क्लास वाला ऐंकर इस्तेमाल करें।

<link rel="stylesheet" href="@tanrei/web/tokens.css" />
<link rel="stylesheet" href="@tanrei/web/icons.css" />
<link rel="stylesheet" href="@tanrei/web/link.css" />

<!-- वाक्य के भीतर। -->
<p>पहले <a class="tanrei-link" href="/guides/accessibility/">सुलभता गाइड</a> पढ़ें।</p>

<!-- अकेला: हिट एरिया न्यूनतम टार्गेट तक पहुँचता है। -->
<a class="tanrei-link" data-standalone href="/getting-started/">शुरुआत करें</a>

<!-- नया टैब: निशान अपने आप बनता है। इसे शब्दों में भी कहें। -->
<a class="tanrei-link" href="https://example.com/" target="_blank" aria-description="नए टैब में खुलता है">सोर्स कोड</a>

<!-- दूसरी साइट, जो वहीं खुलती है जहाँ व्यक्ति है: लेबल के बाद एक तीर, और उसके लिए शब्द। -->
<a class="tanrei-link" href="https://example.com/" data-external="true" aria-description="बाहरी लिंक">मानक</a>

<!-- उस साइट के आइकन के साथ: एक इमेज जो आपकी अपनी साइट सर्व करती है, ऐंकर का पहला चाइल्ड। -->
<a class="tanrei-link" href="https://example.com/" data-external="true" aria-description="बाहरी लिंक"><img
  class="tanrei-link-site-icon" src="/icons/example-com.png" alt="" width="32" height="32"
  loading="lazy" decoding="async" referrerpolicy="no-referrer">मानक</a>

<!-- एक लिंक, जो डिज़ाइन सिस्टम की अंडरलाइन से अलग रखा गया है: always, hover या never। -->
<a class="tanrei-link" data-standalone data-underline="hover" href="/about/">इस साइट के बारे में</a>

<!-- एक हिस्सा जिसका अपना चुनाव है: भीतर का हर लिंक उसी के अनुसार चलता है। -->
<footer style="--tanrei-comp-link-underline-visibility: never">…</footer>

<!-- ग्लिफ़, जो टेक्स्ट से सटाकर लिखा जाता है, बीच में कोई स्पेस नहीं। -->
<a class="tanrei-link" data-standalone href="/tokens.zip"><span class="tanrei-icon" aria-hidden="true">download</span>टोकन डाउनलोड करें</a>
<a class="tanrei-link" data-standalone data-icon-position="trailing" href="/tokens/">आगे: टोकन<span class="tanrei-icon" aria-hidden="true">arrow_forward</span></a>

<!-- सिर्फ़ ग्लिफ़, जिसका नाम aria-label से आता है। -->
<a class="tanrei-link" href="#installation" aria-label="इंस्टॉलेशन का लिंक"><span class="tanrei-icon" aria-hidden="true">link</span></a>

<!-- मौजूदा पेज, वह लिंक जो अभी खोला नहीं जा सकता, और इनवर्स सरफ़ेस पर एक लिंक। -->
<a class="tanrei-link" data-standalone href="/components/" aria-current="page">कंपोनेंट</a>
<a class="tanrei-link" data-standalone role="link" aria-disabled="true">पिछला पेज</a>
<a class="tanrei-link" data-variant="inverse" href="/changes/">क्या बदला</a>

<script type="module">
  // वैकल्पिक: रिपल और dim फ़ीडबैक, noopener, इनकार और डीबग रिपोर्ट। `@tanrei/web` भी इसे लोड करता है।
  // जहाँ पेज बनाते समय निशान नहीं लगाए गए, वहाँ यह साइट से बाहर ले जाने वाले लिंक पर निशान भी लगाती है।
  import { setSiteOrigins, setExternalLabel } from '@tanrei/web/link';
  setSiteOrigins(['https://docs.example.com']); // वे ओरिजिन जो आपकी अपनी साइट का हिस्सा हैं
  setExternalLabel('बाहरी लिंक');                // शब्द, पेज के लिए एक बार, आपकी भाषा में
</script>

import '@tanrei/web/link.css';
import '@tanrei/web/link';
import { Link as RouterLink } from 'react-router-dom';

<a className="tanrei-link" href="/guides/accessibility/">सुलभता गाइड</a>

{/* राउटर का लिंक अपना ऐंकर ख़ुद रेंडर करता है: उसे यह क्लास दें। */}
<RouterLink className="tanrei-link" data-standalone to="/getting-started/">शुरुआत करें</RouterLink>

प्रॉपर्टी	वेब पर
`href`	`href`
`target: new`	`target="_blank"`
`targetLabel`	`aria-description`
`variant: inverse`	`data-variant="inverse"`
`standalone`	`data-standalone`
`iconPosition: trailing`	`data-icon-position="trailing"`
`current`	`aria-current="page"` (या उसका कोई और मान)
`disabled`	`role="link" aria-disabled="true"`, और `href` नहीं
`label`	`aria-label`
`underline`	`data-underline="always"`, `"hover"` या `"never"`; इसके बिना, डिज़ाइन सिस्टम का चुनाव
`external: on`, `off`	`data-external="true"`, `data-external="false"`; इसके बिना, पता तय करता है
`externalLabel`	`aria-description`
`siteIcon`	आपका अपना `<img class="tanrei-link-site-icon" alt="">`, ऐंकर का पहला चाइल्ड

स्पेक

कई पंक्तियों में: अंडरलाइन, स्टेट लेयर और फ़ोकस रिंग हर पंक्ति के साथ चलते हैं

सुलभता गाइड, जो बताती है कि हर कंपोनेंट को नाम कैसे मिलता है, कीबोर्ड से उस तक कैसे पहुँचा और उसे कैसे चलाया जाता है, और स्टेट बदलने पर हर प्लैटफ़ॉर्म क्या पढ़कर सुनाता है

ग्लिफ़, और नए टैब का निशान

टोकन डाउनलोड करें सोर्स देखें सोर्स देखें सोर्स देखें

मौजूदा और अक्षम

अवलोकन कंपोनेंट पिछला पेज

अंडरलाइन: हमेशा, होवर पर, कभी नहीं

हमेशा होवर पर कभी नहीं

साइट से बाहर ले जाने वाला लिंक

स्पेसिफ़िकेशन

इनवर्स सरफ़ेस पर

पेज सेव हो गया। देखें कि क्या बदला।

लिंक अपना कोई टेक्स्ट स्टाइल नहीं लाता: वह उस टेक्स्ट की फ़ैमिली, साइज़, वेट और लाइन हाइट लेता है जिसमें वह रखा है, चाहे वह पैराग्राफ़ हो, हेडिंग, कैप्शन या टेबल का सेल। होवर, फ़ोकस और दबाना उसके टेक्स्ट के पीछे बनते हैं, हर उस पंक्ति पर जिस पर वह चलता है, और कोई जगह नहीं लेते, इसलिए लिंक के आसपास कुछ नहीं हिलता। ग्लिफ़, साइट का आइकन और निशान टेक्स्ट के साइज़ के होते हैं और अपने बग़ल के शब्द वाली पंक्ति पर ही रहते हैं।

अंडरलाइन कब बने, यह एक चुनाव है, जिसके तीन मान हैं। always उसे सामान्य स्टेट में और हर स्टेट में बनाता है। hover उसे तब बनाता है जब लिंक होवर किया हुआ हो, कीबोर्ड से फ़ोकस किया हुआ हो या दबाया हुआ हो। never कोई अंडरलाइन नहीं बनाता, और होवर, फ़ोकस और दबाना तब भी स्टेट लेयर, लेबल के रंग और फ़ोकस रिंग से दिखते हैं। यह चुनाव तीन स्तरों पर सेट होता है: किसी डिज़ाइन सिस्टम के हर टेक्स्ट लिंक के लिए sys.behavior.link-underline, सिर्फ़ लिंक के लिए comp.link.underline.visibility, और किसी एक लिंक के लिए underline प्रॉपर्टी। डिफ़ॉल्ट सिस्टम always चुनता है। वेब पर कंपोनेंट टोकन एक कस्टम प्रॉपर्टी है, इसलिए फ़ुटर जैसा कोई हिस्सा अपना अलग मान रख सकता है। मौजूदा लिंक और सिर्फ़ ग्लिफ़ वाले लिंक में किसी भी चुनाव में अंडरलाइन नहीं होती, और फ़ोर्स्ड कलर्स में वह हर चुनाव में बनती है।

जो लिंक साइट से बाहर ले जाता है, वह यह बताता है। बाहरी लिंक अपने लेबल के बाद arrow_outward ग्लिफ़ दिखाता है और, जहाँ आप दें, लेबल से पहले उस साइट का आइकन। external का मान auto, on या off होता है। auto में वह http या https पता बाहरी है जिसका ओरिजिन पेज के ओरिजिन से अलग है; पाथ, फ़्रैगमेंट, ईमेल पता, टेलीफ़ोन नंबर और डाउनलोड कभी बाहरी नहीं होते। अपनी साइट के बाक़ी ओरिजिन एक बार घोषित कर दें, तो वे भी बाहरी नहीं रहते। comp.link.external.marks पूरे प्रॉडक्ट के लिए आइकन को (arrow) या दोनों निशानों को (none) बंद कर देता है।

साइट से बाहर जाना और नया टैब खोलना दो अलग बातें हैं। लेबल के बाद की जगह में एक ही ग्लिफ़ रहता है: target="_blank" वाले लिंक के लिए open_in_new, चाहे वह बाहरी हो या नहीं, और नहीं तो बाहरी लिंक के लिए arrow_outward। अंत की ओर आपका अपना ग्लिफ़ इन दोनों की जगह ले लेता है, और सिर्फ़ ग्लिफ़ वाले लिंक में दोनों में से कोई नहीं होता।

लिंक कभी कोई आइकन ख़ुद नहीं मँगाता। siteIcon वह इमेज है जो आप देते हैं: जिसे आपकी अपनी साइट सर्व करती है, और जो साइट के बिल्ड के समय बनती है। जो कंपोनेंट उसे गंतव्य से, या किसी आइकन सेवा से माँगता, वह उस पक्ष को बता देता कि हर पाठक किस पेज पर है। जहाँ कोई आइकन नहीं दिया गया, वहाँ लिंक सिर्फ़ तीर दिखाता है। जो आइकन लोड नहीं हो पाता, वह अपनी जगह बनाए रखता है और कुछ नहीं बनाता।

संरचना

भाग	विवरण
1 `container`	The shape behind the link's text, on each line the link runs over. It has no fill at rest and takes no room in the layout: it is where hover, focus and press are drawn.
2 `label` · वैकल्पिक	The link's text, in the text style of the text it sits in. It wraps with that text and is never cut.
3 `underline`	The line under the label, in the label's color. When it is drawn is a choice (LNK-27): at rest and in every state, only while the link is pointed at, focused from the keyboard or pressed, or never. In the default system it is drawn at rest, where it is what tells a link from the text beside it. The current link and a link that is a glyph alone have none.
4 `icon` · वैकल्पिक	A glyph of the system's icon set that the product names, before or after the label, or alone (a heading's anchor). Decorative beside a label; alone, the link is named by label.
5 `site-icon` · वैकल्पिक	A small picture of the site an external link leads to, before the label. The product gives it; the link never fetches one by itself (LNK-32, LNK-35). Decoration: the label names the link.
6 `mark` · वैकल्पिक	The one glyph after the label that says where following the link takes the person: open_in_new for a link that opens a new context, arrow_outward for a link that leaves the site and opens where the person is (LNK-31). Never both. Drawn by the link where the product has put no glyph of its own there.
7 `focus-ring`	The indicator shown for keyboard focus, around the link's part of each line it runs over.

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`href`	`string`	`""`	The destination: an address as the platform's links take one (a URL; on the web a path or a fragment as well). A link without a destination is not a link: it is drawn as the text around it and reported (LNK-21).
`target`	`same` \| `new`	`"same"`	Where the destination opens. same: where the person is — the same tab on the web, the app's own handling of the address elsewhere. new: a new context — a new tab or window on the web, outside the current screen elsewhere — which a link with a label marks with the glyph open_in_new after it and says through targetLabel (LNK-13). Whether the destination is another site is a second fact, external's (LNK-30): a link may leave the site without opening a new context, and open one without leaving.
`targetLabel`	`string`	`""`	What assistive technology reads after the link's name while target is new ("opens in a new tab"). Tanrei ships no words of its own, so the product gives them in its language. Required while target is new; ignored otherwise.
`external`	`auto` \| `on` \| `off`	`"auto"`	Whether the destination is on another site than the one the person is on. auto: the link decides, where the platform can tell (LNK-30) — on the web an address of another origin than the page's and the product's declared own; elsewhere an address outside the hosts the product has declared. on: it is external, whatever the address. off: it is not, and the link shows and says nothing of it. An external link with a label shows an arrow after it and, where siteIcon is given, that site's picture before it (LNK-31, LNK-32); a design system or a product turns either off for every link with comp.link.external.marks. It changes nothing about where or how the destination opens.
`externalLabel`	`string`	`""`	What assistive technology reads after the link's name while the link is external and target is same ("external link"), in the product's language. Empty, the words the product has set once for every external link are read (LNK-34). Ignored while target is new: targetLabel is then the link's one description.
`siteIcon`	`string`	`""`	The picture of the site an external link leads to: the address of an image as the platform's images take one (on the web a URL the page may load — of the product's own origin, or a data URL), or the platform's own image value. Drawn before the label while the link is external (LNK-32); ignored otherwise. The link never derives it from href and never asks the destination or anyone else for it (LNK-35): the product gives a picture it has, made where the product is built. Empty, the link shows the arrow alone.
`variant`	`standard` \| `inverse`	`"standard"`	Which surface the link is drawn for. standard: the product's ordinary surfaces and its quiet containers. inverse: a surface of the opposite theme (a snackbar's, a tooltip's, a dark band on a light page), where the standard link color is not readable. It changes colors only. A design system may add values.
`underline`	`auto` \| `always` \| `hover` \| `never`	`"auto"`	When the label is underlined. always: at rest and in every state. hover: while the link is hovered, focused from the keyboard or pressed, and not at rest. never: in no state. Auto takes comp.link.underline.visibility, the design system's answer (always in the default system). hover and never are for a link that stands by itself among other links — a list of navigation, a footer — where its place says what it is; inside running text use them only where the link color stands 3:1 apart from the text's (LNK-29).
`standalone`	`boolean`	`false`	False: the link is part of a sentence or a line of text, and its target is its own text (LNK-17). True: the link stands by itself — under a paragraph, in a table cell, in a row of links — and its hit area is extended to the minimum target without changing how it is drawn or laid out. It changes nothing a person sees.
`iconPosition`	`leading` \| `trailing`	`"leading"`	Which side of the label the glyph sits on, in the reading direction. Ignored when the link has no label or no glyph.
`current`	`boolean`	`false`	The link names the place the person is already at, in a set of navigation: the current page in a row of site links or a trail of pages, the current section in a table of contents. It is exposed as the current item, drawn without an underline, whatever underline says, at the emphasized weight, and stays a link (LNK-18). At most one link of a set is current; the set, not the link, decides which.
`disabled`	`boolean`	`false`	The link cannot be followed now (the previous page of the first page): it keeps the link role with the disabled state and no destination, leaves the focus order and opens nothing (LNK-19).
`label`	`string`	`""`	The accessible name of a link that is a glyph alone ("Link to Installation"), in the product's language. Ignored while the link has a label of text, which names it.

स्लॉट

स्लॉट विवरण

default The label: the text that says where the link goes. Leave it empty for a link that is a glyph alone.

icon The glyph: a glyph of the system's icon set, drawn through the platform's icon helper at the size of the link's text. With a label it sits at the side iconPosition names; without one it is the link's only content. At the leading side it stands where an external link would show the site's picture, and at the trailing side where it would show its arrow or the mark of a new context: the product's glyph stands and the link draws nothing of its own there.

स्लॉट	विवरण
`default`	The label: the text that says where the link goes. Leave it empty for a link that is a glyph alone.
`icon`	The glyph: a glyph of the system's icon set, drawn through the platform's icon helper at the size of the link's text. With a label it sits at the side iconPosition names; without one it is the link's only content. At the leading side it stands where an external link would show the site's picture, and at the trailing side where it would show its arrow or the mark of a new context: the product's glyph stands and the link draws nothing of its own there.

इवेंट

इवेंट	विवरण
`click`	The link was activated by pointer, touch, Enter or assistive technology. It is emitted before the destination opens; a product that takes the navigation itself (a client-side router) cancels it (LNK-12).

स्टेट

व्यवहार

EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।

ID	आवश्यकता
`LNK-1`	WHILE href is a destination THE link SHALL be the platform's own link to it (the web's anchor element in the document itself, not in a shadow root; SwiftUI's Link; on Compose, Flutter and React Native an element or a run of text with the platform's link semantics whose address is opened by the platform's opener), so that whatever the platform gives a link — on the web its context menu, opening in a new tab or window, copying and dragging its address, the address shown before it is followed, a crawler and a search index that read it, and a link that works before any script has run — is the platform's, and not the link's to draw or to take over; and SHALL expose the link role.
`LNK-2`	THE link SHALL draw its label in the text style of the text it sits in — that text's family, size, weight, line height and letter spacing — bringing no text style of its own, in the label color of its variant (comp.link.standard.label.color for standard, comp.link.inverse.label.color for inverse), on the baseline of the text beside it, and SHALL NOT make its line taller than that text makes it.
`LNK-3`	WHILE its underline is shown (LNK-27, LNK-28) THE link SHALL draw it comp.link.underline.width thick, comp.link.underline.offset below the text's baseline, in the label's color of that state, under the text only and not under a glyph, the site icon or the mark. WHILE its underline is always — the default system's choice — THE link SHALL draw it at rest and in every state, so that a link is told from the text around it without relying on color. A current link (LNK-18) and a link that is a glyph alone (LNK-16) draw none, whatever the choice.
`LNK-4`	THE link SHALL wrap its label with the text it sits in, breaking where that text's language allows a break and, for a run with no such place that is longer than the line (an address), inside the run rather than overflowing; it SHALL NOT cut its label, draw an ellipsis or scroll; and on every line it runs over it SHALL draw its underline, its container and its focus ring for its own part of that line.
`LNK-5`	THE link SHALL draw its container as the box of its content on each line it runs over — as wide as its part of the line and as high as the text's own box, never the line's whole height where that would touch a neighbouring line's text — filled with the container color of its variant and state, with corners comp.link.container.shape, and SHALL NOT let the container take room, move the text beside it or change a line's height.
`LNK-6`	WHILE hovered, keyboard-focused or pressed THE link SHALL render its container, label, icon and opacity from the component tokens of the highest-precedence active state, with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state.
`LNK-7`	WHEN the link receives keyboard focus THE link SHALL show the focus ring without animation — the system's focus indicator, sys.focus.offset from the container, sys.focus.outer-width wide in the focus-ring color, with the inner stroke of sys.focus.inner-width where the system has one — around its part of each line it runs over, never as one box around the lines between its first word and its last; focus gained by pointer or touch SHALL NOT show it.
`LNK-8`	WHEN the link is pressed by pointer, touch or Enter THE link SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner.
`LNK-9`	WHILE pressed THE link SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; label, icon, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.link.motion.feedback-duration with motion.state-easing, fades over motion.state-duration with motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
`LNK-10`	THE link SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
`LNK-11`	THE link SHALL change between its states over comp.link.motion.state-duration with comp.link.motion.state-easing, and at once where motion is reduced.
`LNK-12`	WHEN the user activates the link by pointer, touch or Enter THE link SHALL emit click exactly once and then open href where target names, unless the product cancelled that click, in which case it SHALL open nothing: the product's own router has taken the navigation. It SHALL NOT hold the navigation back for sys.motion.duration.press-hold. THE link SHALL NOT be activated by Space, which on the web scrolls the page as it does on any link, and SHALL NOT show the pressed state for it; WHERE the platform gives its links other keys or gestures (on the web a modified or a middle click that opens a new tab, on Apple platforms a long press that previews) THE link SHALL leave them to the platform.
`LNK-13`	WHILE target is new THE link SHALL open href in a new context — on the web a new tab or window that is given no handle to the page that opened it; on the other platforms outside the screen the person is on, as the platform's opener decides — and, WHILE it has a label and no glyph of the product's after it, SHALL draw the glyph open_in_new of the system's icon set after the label as LNK-14 draws a trailing glyph — at the end of the label in the link's own direction, right after its last word — in the label color of its variant and state, through the icon helper, which mirrors it where the link's own direction is right-to-left because the icon set marks its name, and hidden from assistive technology. It SHALL draw that glyph whether or not the link is external, and then no arrow (LNK-31): the place after the label holds one glyph. WHILE the link holds the product's own glyph at its trailing side, or has no label, THE link SHALL draw no mark of its own: the product has chosen what that place shows. Whether a mark is drawn or not THE link SHALL expose targetLabel as its description, read after its name and role — its one description, so externalLabel is not read with it (LNK-34) — and WHILE targetLabel is empty SHALL still render and in debug builds report that a link that opens a new context does not say so. WHILE target is same THE link SHALL draw no open_in_new and SHALL ignore targetLabel.
`LNK-14`	WHILE the link has both a label and a glyph THE link SHALL draw the glyph at the side iconPosition names in the link's own direction — the direction LNK-26 lays its label out in: a standalone link's label's own, and a phrase's the sentence's unless the product marks the phrase with a direction of its own — leading before the label's first word, trailing after its last word, both mirrored where that direction is right-to-left in a box as large as the font size of the link's text, comp.link.container.gap from the label, centred on the line of the word beside it, in the label color of its variant and state, with sys.icon.family.unselected and sys.icon.fill.unselected, sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max, hidden from assistive technology; and SHALL keep the glyph on the line of the word next to it, so that a leading glyph never ends a line and a trailing glyph or the mark never begins one.
`LNK-15`	WHILE the link has a label THE link SHALL expose the label's text as its accessible name and ignore the label prop; WHILE it has a glyph and no label THE link SHALL expose the label prop as its accessible name and keep the glyph from assistive technology; WHILE it has a glyph, no label and an empty label prop THE link SHALL still render, and in debug builds report that it has no accessible name. THE link SHALL add nothing to its name: neither its address, nor that it opens a new context (LNK-13), nor that it leaves the site (LNK-34), nor that it is current (LNK-18); the site icon and the arrow are kept from assistive technology and name nothing.
`LNK-16`	WHILE the link has a glyph and no label THE link SHALL draw the glyph alone, in a box as large as the font size of the text it sits in, in the icon color of its variant and state (comp.link.standard.icon.color for standard, comp.link.inverse.icon.color for inverse), with its container a square one line of that text high around it, and SHALL draw no underline and no mark; it SHALL answer hover, focus and press and extend its hit area as LNK-6 to LNK-10 and LNK-17 say. Where it stands and when it is seen are the layout's that places it: a heading's anchor is placed and revealed by prose and is this link showing the glyph link.
`LNK-17`	WHILE standalone is false and the link has a label THE link SHALL take input on its own text and container and nowhere else: its hit area is its part of each line and SHALL NOT reach over the text of a neighbouring line or of the same line. WHILE standalone is true, or the link is a glyph alone, and its visual size is below the minimum target THE link SHALL extend its hit area on both axes to sys.target.touch for touch input and sys.target.pointer for fine pointers, without changing its visual size or the room it takes in the layout; a platform that cannot tell the input type SHALL use sys.target.touch.
`LNK-18`	WHILE current is true THE link SHALL expose itself as the current item of its set (on the web the current page; a platform without that state, the selected state) and stay a link that can be focused and followed; it SHALL draw its container, label and glyph from the parts of its variant prefixed with current (comp.link.standard.current.label.color, comp.link.standard.current.icon.color, and inverse's tokens of the same names), SHALL draw no underline, and SHALL draw its label at the emphasized weight of the text style it sits in — that style's weight plus sys.typescale.emphasis.body in running text and a label, plus sys.typescale.emphasis.heading in a heading — so that it is told from the links beside it by more than its color.
`LNK-19`	WHILE disabled is true THE link SHALL NOT be a link that can be followed: it SHALL render its container, label, icon and opacity from the disabled component tokens of its variant, its underline, where its choice draws one at rest (a disabled link is neither hovered nor focused, so under hover it has none), the mark of LNK-13 and the arrow of LNK-31 in the disabled label color, the site icon at comp.link.site-icon.disabled-opacity, SHALL expose the link role with the disabled state and no destination, SHALL NOT be focusable, SHALL NOT emit click, and SHALL open nothing by any means the platform gives a link (on the web the anchor carries no href, so there is no context menu entry, no drag and no new tab for it).
`LNK-20`	THE link SHALL draw no state for a destination already visited: its colors say what it is and what state it is in, and are the same before and after it has been followed.
`LNK-21`	IF href is empty or only white space, or names a script to run rather than a place to go (the web's javascript: scheme), or cannot be read as an address by the platform, THE link SHALL NOT be a link: it SHALL draw its content as the text around it, with no underline, no state, no mark, no arrow and no site icon, SHALL expose no role, SHALL NOT be focusable and SHALL emit nothing, and in debug builds report it — a link without a destination has nothing else to be, and a press that does something on the page is a button's. WHEN target or variant names a value the link or the active design system does not have THE link SHALL behave as same and render with the default variant's tokens, WHEN underline or external names a value the link does not define THE link SHALL treat it as auto, and in each case in debug builds report the unknown value.
`LNK-22`	WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE link SHALL draw its label, its glyph, its mark or arrow and its underline in the platform's link color and, WHILE disabled, in its disabled text color; SHALL draw the underline at rest whatever underline and the tokens it follows say, except on a current link and a glyph alone — the colors are then the person's and not the design system's, so nothing any longer holds the link's color apart from the text's (LNK-29), and the line is what the platform itself gives a link; SHALL draw the site icon as the picture it is, unchanged; and SHALL draw its focus ring in the platform's highlight color.
`LNK-23`	WHILE the text size is enlarged THE link SHALL grow with the text it sits in — its label, its glyph box, the box of its site icon, its container and its hit area — and SHALL keep comp.link.underline.width, comp.link.underline.offset, comp.link.container.gap and comp.link.site-icon.shape.
`LNK-24`	THE link SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the link is shown THE link SHALL draw itself for the new direction at once, without a motion of its own, keeping its focus.
`LNK-25`	WHERE the layout direction is right-to-left THE link SHALL draw the glyph of its icon slot mirrored left to right exactly when the system's icon set marks that glyph's name as mirrored or the product forces mirroring for that use, and unmirrored when the product forbids it: the icon helper mirrors the glyph inside its own box, about the box's vertical centre line, changing neither its place, size, color and fill nor the order LNK-14 gives. THE link SHALL NOT mirror a glyph itself, and SHALL NOT mirror content the product gives as an image or a view of its own rather than by a glyph's name — the site icon among it (LNK-32).
`LNK-26`	WHILE standalone is true THE link SHALL lay out its label as text of its own direction, isolated from the text around it: it takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right word, a number with its sign or unit, a telephone number and an address keep their own order in a right-to-left layout and reorder nothing beside them; THE link SHALL still place the label and align its lines by the layout direction, not by the text's own. WHILE standalone is false THE link SHALL lay out its label as part of the sentence it is in, in that sentence's direction, isolated only so that it reorders nothing beside it: a phrase of a sentence is that sentence's text, and what direction a block of text has is that block's to say.
`LNK-27`	THE link SHALL show its underline as its underline prop names: WHILE underline is auto, as comp.link.underline.visibility names, which follows sys.behavior.link-underline unless a design system sets the link apart; WHILE underline is always, hover or never, as that value names, whatever the tokens say. WHEN underline, or the token it follows, changes THE link SHALL draw the other form at once, moving no text and keeping its focus. A platform that cannot draw a choice SHALL fall back to the first value, always, and state that in its README.
`LNK-28`	WHILE its underline is hover THE link SHALL draw no underline at rest and SHALL draw it, as LNK-3 says, WHILE the link is hovered, keyboard-focused or pressed, the line arriving and leaving with that state as LNK-11 times it and moving no text; the focus ring of LNK-7 is drawn as under every choice, so keyboard focus shows the ring and the line together. WHERE the input has no hover (touch) the line is therefore seen for the length of a press and no longer, and THE link SHALL put nothing in its place at rest: a link under hover has to be told from the text beside it as a link that is never underlined has to be (LNK-29). WHILE its underline is never THE link SHALL draw no underline in any state, and SHALL still show hover, focus and press by its container, its label color and its focus ring (LNK-6, LNK-7).
`LNK-29`	WHILE its underline is not always, standalone is false, current is false and it has a label THE link SHALL, in debug builds on a platform that can read both colors, report a label color whose contrast against the color of the text the link sits in is under 3:1, and SHALL still render: a phrase in running text that is not underlined at rest is told from the words beside it by color alone, which people who do not see that difference cannot do (WCAG 1.4.1). THE link SHALL report nothing for a standalone link, a current link or a glyph alone, which are not phrases among other words. The same ratio is held for the design system's own choice by the build, not by the link: where sys.behavior.link-underline or comp.link.underline.visibility is not always, the link color is held 3:1 apart from the text color in every scheme.
`LNK-30`	THE link SHALL treat its destination as external as its external prop names: WHILE external is on, as external, whatever href is; WHILE it is off, as not external; WHILE it is auto, as external exactly when the platform can tell that the destination is on another site than the one the person is on. On the web that is: href, read against the document's address, has the scheme http or https, its origin is neither the document's nor one the product has declared as part of its own site, and the anchor does not ask for a download. A path, a fragment, an address of any other scheme (a mail address, a telephone number) and a download are never external under auto. On the other platforms, where a screen has no address of its own, that is: the product has declared the hosts that are its own, and href is an http or https address outside them; WHILE it has declared none, nothing is external under auto. THE link SHALL change nothing but what it shows and says for being external (LNK-31 to LNK-34): where the destination opens is target's alone, and nothing is added to how the address is requested.
`LNK-31`	WHILE the link is external, has a label, holds no glyph of the product's after it, target is same and comp.link.external.marks is not none THE link SHALL draw the glyph arrow_outward of the system's icon set after the label as LNK-14 draws a trailing glyph — at the end of the label in the link's own direction (LNK-14), right after its last word, in a box as large as the font size of its text, comp.link.container.gap from the label, on the line of the last word and never beginning a line, not underlined — in the label color of its variant and state, through the icon helper, which mirrors it where the link's own direction is right-to-left because the icon set marks its name, and hidden from assistive technology. WHILE target is new THE link SHALL draw the mark of LNK-13 in that place and no arrow: the place holds one glyph, and that the page the person is on stays open is what they need to know first. WHILE the link holds the product's own glyph at its trailing side, or has no label, THE link SHALL draw no arrow.
`LNK-32`	WHILE the link is external, has a label, siteIcon names a picture, the link holds no glyph of the product's before its label and comp.link.external.marks is all THE link SHALL draw that picture before the label as LNK-14 places a leading glyph: in a square box as large as the font size of the link's text, comp.link.container.gap from the label, centred on the line of the first word and never ending a line, the whole picture scaled to fit the box with its proportions kept, its corners comp.link.site-icon.shape eased as LNK-10 eases the container's, not underlined, never mirrored, in every state as it is at rest, and hidden from assistive technology with no text alternative: it is decoration, and the label names the link. THE link SHALL keep the box's room from the first frame, so that nothing moves when the picture arrives, and IF the picture cannot be loaded or decoded SHALL draw nothing in the box — no broken-picture mark, no alternative text, no glyph in its place — and in debug builds report it. WHILE siteIcon is empty THE link SHALL draw no picture and keep no room for one: an external link without a picture shows the arrow alone. WHILE the link holds the product's own glyph before its label THE link SHALL draw that glyph and no picture. THE link SHALL draw the picture as a picture only: whatever the file holds, nothing in it is run, laid out as markup or opened as a document.
`LNK-33`	THE link SHALL draw the marks of an external link as comp.link.external.marks names: all, the site icon where one is given (LNK-32) and the arrow (LNK-31); arrow, the arrow alone, with no picture drawn and no room kept for one; none, neither, and the link then exposes nothing of being external (LNK-34). The choice is the design system's or the product's layer's and holds for every link; one link is set apart by external (off shows and says nothing) and by leaving siteIcon empty. It SHALL change nothing about the mark of a new context (LNK-13). WHEN the choice changes THE link SHALL draw the other form at once. A platform that cannot read the choice SHALL fall back to the first value, all, and state that in its README.
`LNK-34`	WHILE the link is external, has a label, target is same and comp.link.external.marks is not none THE link SHALL expose as its description, read after its name and role, externalLabel or, WHILE externalLabel is empty, the words the product has set once for every external link (on the web where the page is made or through the package's script; a setting of the package elsewhere), whether the arrow is drawn or the product's own trailing glyph stands in its place; WHILE both are empty THE link SHALL still render and in debug builds report, once for the page or the screen and not once for each link, that external links do not say so. WHILE target is new THE link SHALL expose targetLabel alone (LNK-13): a link has one description, and the product words it for both facts where both should be said ("opens example.com in a new tab"). WHILE the link has no label it SHALL expose nothing of being external. Tanrei ships no words of its own.
`LNK-35`	THE link SHALL request nothing by itself for what it draws: it SHALL NOT derive a picture's address from href, SHALL NOT ask the destination or any other party for an icon, a title or a preview, and SHALL NOT reach the destination in any way before the person follows the link. The one address it loads is siteIcon, exactly as the product gave it; on the web it loads that picture without sending the page's address with the request, and in debug builds reports a siteIcon whose origin is not the document's — every reader's browser would then tell that other party which page is being read.

प्लैटफ़ॉर्म के अनुसार नामों का मिलान

पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	`tanrei-link`	`TanreiLink`	`TanreiLink`	`TanreiLink`	`Link`
`href` · प्रॉपर्टी	`href`	`destination`	`href`	`href`	`href`
`target` · प्रॉपर्टी	`target`	`target`	`target`	`target`	`target`
`targetLabel` · प्रॉपर्टी	`aria-description`	`targetLabel`	`targetLabel`	`targetSemanticLabel`	`targetLabel`
`external` · प्रॉपर्टी	`data-external`	`external`	`external`	`external`	`external`
`externalLabel` · प्रॉपर्टी	`aria-description`	`externalLabel`	`externalLabel`	`externalSemanticLabel`	`externalLabel`
`siteIcon` · प्रॉपर्टी	`img.tanrei-link-site-icon`	`siteIcon`	`siteIcon`	`siteIcon`	`siteIcon`
`variant` · प्रॉपर्टी	`data-variant`	`variant`	`variant`	`variant`	`variant`
`underline` · प्रॉपर्टी	`data-underline`	`underline`	`underline`	`underline`	`underline`
`standalone` · प्रॉपर्टी	`data-standalone`	`TanreiLink`	`TanreiLink`	`TanreiLink`	`standalone`
`iconPosition` · प्रॉपर्टी	`data-icon-position`	`iconPosition`	`iconPosition`	`iconAlignment`	`iconPosition`
`current` · प्रॉपर्टी	`aria-current`	`isCurrent`	`current`	`isCurrent`	`current`
`disabled` · प्रॉपर्टी	`aria-disabled`	`disabled`	`enabled`	`enabled`	`disabled`
`label` · प्रॉपर्टी	`aria-label`	`label`	`contentDescription`	`semanticLabel`	`accessibilityLabel`
`click` · इवेंट	`click`	`action`	`onClick`	`onPressed`	`onPress`
टिप्पणियाँ	A class on the product's own anchor, not an element with an anchor in its shadow root: `<a class="tanrei-link" href="…">…</a>`, styled by a stylesheet of the package (LNK-1). The anchor is in the document, so it is a link before any script runs and for whatever reads the page as built: a crawler, a search index, a framework that prefetches or routes the anchors it finds, and a router's own link component, which takes the class. The props are the anchor's own attributes: `href`; `target` in HTML's spelling (`_blank` is `new`; `target="new"` would name a window, so it is not used here); `aria-description` for `targetLabel`; `aria-current="page"` (or another of its values) for `current`; `aria-label` for `label`; and a disabled link is written `<a class="tanrei-link" role="link" aria-disabled="true">` with no `href`. `data-variant="inverse"`, `data-standalone` and `data-icon-position="trailing"` are the three that HTML has no attribute for. The glyph is a `.tanrei-icon` element inside the anchor, before or after the text; the mark is the anchor's `::after` (the icon font's `open_in_new`, mirrored under the anchor's own `:dir(rtl)`). A standalone link is given the `dir` of its label's first strong character (a glyph's name aside) by the package's script where the page wrote none, so its direction, and so the side of its glyphs and its mark, is its label's first strong character's (LNK-26, LNK-14); a phrase in a sentence takes the `dir` the page writes on it, not drawn while `data-icon-position` is `trailing` or the anchor has no text (`aria-label` present). The container and the ring follow wrapped lines through `box-decoration-break: clone` and `outline`; the extended hit area of LNK-17 is a pseudo-element that takes no room. The stylesheet alone gives the default system's whole look and every state, including the press-hold (a delayed transition back from `:active`). The package's script, where it is loaded, adds through one listener on the document what a stylesheet cannot: the shared press primitive (ripple and dim, LNK-9), `noopener` on a new context, the refusals of LNK-21 and every debug report. The same rules apply to every anchor of a `.tanrei-prose` that is prose's own (PRS-16), so rendered Markdown needs no class, and a heading's anchor (`.tanrei-prose-anchor`) is the icon-only form. `rel` and `download` are the anchor's own. React: `Link` renders the same anchor and takes a `render` prop for a router's link. `data-underline="always \| hover \| never"` sets one link apart; without it the anchor follows `--tanrei-comp-link-underline-visibility`, which the stylesheet reads by a container style query and, where the browser has none, from `data-underline-system` written on the document's root by the package's script; with neither it is `always`, the first value. The custom property can be set on any element, so a region (a footer, a navigation list) takes its own choice without an attribute on each link. `hover` is `:hover` under `(hover: hover)`, `:focus-visible` and the pressed state; the line is the text decoration's color, so nothing moves. External: the stylesheet computes nothing about addresses. It draws the marks for `data-external` that is not `false`, and that attribute is written by whoever knows the page's address — where the page is made, by `markExternalLinks()` of `@tanrei/web/links` (Node; it takes the tree the product's own renderer already has, and parses nothing) or by React's `Link`, both from the product's `site` origins; and, for an anchor that carries no `data-external`, by the package's script, which compares `new URL(a.href).origin` with `location.origin` and with `setSiteOrigins([…])` and writes `data-external="detected"` (re-read when `href` changes; only a value it wrote is ever changed by it). A page with neither shows no external mark: a missing mark, never a wrong one. Marks written by the script arrive after the first paint and take room; marks written where the page is made are in the first paint. The arrow is the same `::after` as the mark of a new context, whose content is `open_in_new` while `target="_blank"` and `arrow_outward` otherwise, so the two cannot both be drawn. The site icon is the product's `<img class="tanrei-link-site-icon" src="…" alt="" width="…" height="…" loading="lazy" decoding="async" referrerpolicy="no-referrer">`, the anchor's first child, placed as a leading glyph is; `alt=""` and no role keep it from assistive technology; it is an `img`, never an inline `svg`, an `object` or an `iframe`, so a vector file is drawn and not run (LNK-32). A broken picture keeps its room and draws nothing. `externalLabel` is `aria-description` on the anchor, written by the same step that writes `data-external` where the product set words for every external link (`externalLabel` of `markExternalLinks()`, `setExternalLabel()` of the script). `comp.link.external.marks` is read as the underline choice is. `resolveSiteIcons()` of `@tanrei/web/links` is the build-time helper that turns the external origins of a site into pictures the site serves itself; the component never calls it and nothing of it runs in a browser. Words: the words set once for every external link are the key `externalLabel` of the product's words, and `targetLabel` is read the same way; the script's `setExternalLabel(text)` is `setWords({ externalLabel: text })` before it is released.	Two spellings for the two places a link stands. Standalone: the view `TanreiLink(_ title: String, destination: URL, target:, targetLabel:, variant:, icon:, iconPosition:, isCurrent:, action:)`, built on SwiftUI's `Link`, taking its font from the environment and disabled by `.disabled(_:)`; `TanreiLink(label:icon:destination:)` is the glyph alone. In text: `Text(tanreiLink:)` helpers that build an `AttributedString` run with the `link` attribute, the underline and the variant's color, for use inside a `Text`. `action` runs before the address opens and returns whether the link should still open it (the environment's `OpenURLAction` does the opening, so an app that routes addresses itself handles it there). The `isLink` trait; `isSelected` for current. SwiftUI draws no hover, focus or press on a run inside a `Text`: an in-text link there has its resting look and the system's own focus and press, and the README says so. Not built on this platform yet: `underline: TanreiLinkUnderline? = nil` (nil is auto; `.always`, `.hover`, `.never`), read from the generated choice otherwise; hover is the pointer's on iPadOS, macOS and visionOS, and focus from a keyboard. `external: Bool? = nil` (nil is auto): auto reads the hosts the app declares once in the environment (`.tanreiSiteHosts([…])`), and with none declared nothing is external. `siteIcon: Image? = nil` is an image the app already has (an asset, or one it loaded itself); the view loads nothing. `externalLabel` is the accessibility hint; the words for every external link are an environment value. In a `Text` run the arrow and the picture are attachments of the attributed string.	Standalone: `TanreiLink(text, href, onClick = null, target, targetLabel, variant, icon, iconPosition, current, enabled, contentDescription)`, drawn with `LocalTextStyle`. In text: `tanreiLinkAnnotation(href, variant, onClick)` returns a `LinkAnnotation.Url` whose `TextLinkStyles` carry the resting, hovered, focused and pressed tokens, for `AnnotatedString.Builder.withLink`; a link annotation has the link semantics Compose lacks for a clickable element (the standalone form, a clickable element, still has no link role). `enabled` is the inverse flag. The address is opened through `LocalUriHandler.current` after `onClick`, which returns false to keep it closed. Current is `selected` semantics. A run of text draws no ripple: LNK-9's fallback. Not built on this platform yet: `underline: TanreiLinkUnderline? = null` (null is auto). `external: Boolean? = null` (null is auto), decided against `LocalTanreiSiteHosts`; with none provided nothing is external. `siteIcon: Painter? = null` is the app's own painter; the composable loads nothing. `externalLabel` joins the state description; the words for every external link are a composition local. In an annotated string the arrow and the picture are inline content.	Standalone: `TanreiLink(label: …, href: …, onPressed:, target:, targetSemanticLabel:, variant:, icon:, iconAlignment:, isCurrent:, enabled:)`, in `DefaultTextStyle`. In text: `TanreiLinkSpan(text: …, href: …)`, an `InlineSpan` for `Text.rich` that carries its recognizer and its states. `Semantics(link: true)`, `linkUrl` where the engine has it; `selected` for current. The address is opened by the opener the app provides, after `onPressed`, which returns false to keep it closed. `enabled` is the inverse flag. Not built on this platform yet: `underline: TanreiLinkUnderline?` (null is auto). `external: bool?` (null is auto), decided against the hosts of `TanreiLinkScope`; with none nothing is external. `siteIcon: ImageProvider?` is the app's own provider — an asset or a memory image; the widget never builds a network provider from `href`. `externalSemanticLabel` is the semantics hint; the words for every external link come from `TanreiLinkScope`. In a `TanreiLinkSpan` the arrow and the picture are widget spans.	`<Link href="…">text</Link>` is a `Text` with `accessibilityRole="link"`: nested in a `Text` it is in that text and inherits its style; by itself it takes a `style` (a text style of the typescale) and `standalone` extends its `hitSlop`. `onPress` receives an event whose `preventDefault()` keeps the address closed; otherwise `Linking.openURL(href)`. `accessibilityHint` carries `targetLabel`; `accessibilityState` carries `disabled` and, for current, `selected`. A nested `Text` draws no ripple and no hover: LNK-9's fallback. Follows the app's direction where an ancestor's is not known. Not built on this platform yet: `underline?: 'always' \| 'hover' \| 'never'` (undefined is auto); hover exists only where the platform reports a pointer. `external?: boolean` (undefined is auto), decided against the hosts given to the provider; with none nothing is external. `siteIcon?: ImageSourcePropType` is a source the app already has (a `require`d asset); the component never builds a `{ uri }` from `href`. `externalLabel` is `accessibilityHint`. Nested in a `Text`, the picture is an inline `Image` and the arrow a glyph of the icon font.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
`--tanrei-comp-link-container-gap`	`sys.space.space50`	4px
`--tanrei-comp-link-container-shape`	`sys.shape.corner.extra-small`	3px
`--tanrei-comp-link-disabled-container-shape`	—	3px
`--tanrei-comp-link-disabled-opacity`	—	1
`--tanrei-comp-link-external-marks`	—	0
`--tanrei-comp-link-focused-container-shape`	—	3px
`--tanrei-comp-link-focused-opacity`	—	1
`--tanrei-comp-link-hovered-container-shape`	—	3px
`--tanrei-comp-link-hovered-opacity`	—	1
`--tanrei-comp-link-inverse-container-color`	—	#000000 · 0%
`--tanrei-comp-link-inverse-current-container-color`	—	#000000 · 0%
`--tanrei-comp-link-inverse-current-icon-color`	`comp.link.inverse.current.label.color`	#f1f1f1
`--tanrei-comp-link-inverse-current-label-color`	`sys.color.inverse-on-surface`	#f1f1f1
`--tanrei-comp-link-inverse-current-state-layer-color`	`comp.link.inverse.current.label.color`	#f1f1f1
`--tanrei-comp-link-inverse-disabled-container-color`	—	#000000 · 0%
`--tanrei-comp-link-inverse-disabled-current-container-color`	—	#000000 · 0%
`--tanrei-comp-link-inverse-disabled-current-icon-color`	—	#f1f1f1 · 38%
`--tanrei-comp-link-inverse-disabled-current-label-color`	—	#f1f1f1 · 38%
`--tanrei-comp-link-inverse-disabled-current-state-layer-color`	—	#f1f1f1 · 38%
`--tanrei-comp-link-inverse-disabled-icon-color`	—	#f1f1f1 · 38%
`--tanrei-comp-link-inverse-disabled-label-color`	—	#f1f1f1 · 38%
`--tanrei-comp-link-inverse-disabled-state-layer-color`	—	#f1f1f1 · 38%
`--tanrei-comp-link-inverse-focused-container-color`	—	#e2e2e2 · 10%
`--tanrei-comp-link-inverse-focused-current-container-color`	—	#f1f1f1 · 10%
`--tanrei-comp-link-inverse-focused-current-icon-color`	—	#f1f1f1
`--tanrei-comp-link-inverse-focused-current-label-color`	—	#f1f1f1
`--tanrei-comp-link-inverse-focused-current-state-layer-color`	—	#f1f1f1
`--tanrei-comp-link-inverse-focused-icon-color`	—	#f1f1f1
`--tanrei-comp-link-inverse-focused-label-color`	—	#e2e2e2
`--tanrei-comp-link-inverse-focused-state-layer-color`	—	#e2e2e2
`--tanrei-comp-link-inverse-hovered-container-color`	—	#e2e2e2 · 8%
`--tanrei-comp-link-inverse-hovered-current-container-color`	—	#f1f1f1 · 8%
`--tanrei-comp-link-inverse-hovered-current-icon-color`	—	#f1f1f1
`--tanrei-comp-link-inverse-hovered-current-label-color`	—	#f1f1f1
`--tanrei-comp-link-inverse-hovered-current-state-layer-color`	—	#f1f1f1
`--tanrei-comp-link-inverse-hovered-icon-color`	—	#f1f1f1
`--tanrei-comp-link-inverse-hovered-label-color`	—	#e2e2e2
`--tanrei-comp-link-inverse-hovered-state-layer-color`	—	#e2e2e2
`--tanrei-comp-link-inverse-icon-color`	`sys.color.inverse-on-surface`	#f1f1f1
`--tanrei-comp-link-inverse-label-color`	`sys.color.inverse-link`	#e2e2e2
`--tanrei-comp-link-inverse-pressed-container-color`	—	#e2e2e2 · 10%
`--tanrei-comp-link-inverse-pressed-current-container-color`	—	#f1f1f1 · 10%
`--tanrei-comp-link-inverse-pressed-current-icon-color`	—	#f1f1f1
`--tanrei-comp-link-inverse-pressed-current-label-color`	—	#f1f1f1
`--tanrei-comp-link-inverse-pressed-current-state-layer-color`	—	#f1f1f1
`--tanrei-comp-link-inverse-pressed-icon-color`	—	#f1f1f1
`--tanrei-comp-link-inverse-pressed-label-color`	—	#e2e2e2
`--tanrei-comp-link-inverse-pressed-state-layer-color`	—	#e2e2e2
`--tanrei-comp-link-inverse-state-layer-color`	`comp.link.inverse.label.color`	#e2e2e2
`--tanrei-comp-link-motion-feedback-duration`	`sys.motion.role.feedback`	450ms
`--tanrei-comp-link-motion-state-duration`	`sys.motion.role.state.compact`	200ms
`--tanrei-comp-link-motion-state-easing`	`sys.motion.easing.state`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-link-pressed-container-shape`	—	3px
`--tanrei-comp-link-pressed-opacity`	—	1
`--tanrei-comp-link-site-icon-disabled-opacity`	`sys.state.disabled-content-opacity`	0.38
`--tanrei-comp-link-site-icon-shape`	`sys.shape.corner.extra-small`	3px
`--tanrei-comp-link-standard-container-color`	—	#000000 · 0%
`--tanrei-comp-link-standard-current-container-color`	—	#000000 · 0%
`--tanrei-comp-link-standard-current-icon-color`	`comp.link.standard.current.label.color`	#1b1b1b
`--tanrei-comp-link-standard-current-label-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-link-standard-current-state-layer-color`	`comp.link.standard.current.label.color`	#1b1b1b
`--tanrei-comp-link-standard-disabled-container-color`	—	#000000 · 0%
`--tanrei-comp-link-standard-disabled-current-container-color`	—	#000000 · 0%
`--tanrei-comp-link-standard-disabled-current-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-link-standard-disabled-current-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-link-standard-disabled-current-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-link-standard-disabled-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-link-standard-disabled-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-link-standard-disabled-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-link-standard-focused-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-link-standard-focused-current-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-link-standard-focused-current-icon-color`	—	#1b1b1b
`--tanrei-comp-link-standard-focused-current-label-color`	—	#1b1b1b
`--tanrei-comp-link-standard-focused-current-state-layer-color`	—	#1b1b1b
`--tanrei-comp-link-standard-focused-icon-color`	—	#4b4b4b
`--tanrei-comp-link-standard-focused-label-color`	—	#1b1b1b
`--tanrei-comp-link-standard-focused-state-layer-color`	—	#1b1b1b
`--tanrei-comp-link-standard-hovered-container-color`	—	#1b1b1b · 8%
`--tanrei-comp-link-standard-hovered-current-container-color`	—	#1b1b1b · 8%
`--tanrei-comp-link-standard-hovered-current-icon-color`	—	#1b1b1b
`--tanrei-comp-link-standard-hovered-current-label-color`	—	#1b1b1b
`--tanrei-comp-link-standard-hovered-current-state-layer-color`	—	#1b1b1b
`--tanrei-comp-link-standard-hovered-icon-color`	—	#4b4b4b
`--tanrei-comp-link-standard-hovered-label-color`	—	#1b1b1b
`--tanrei-comp-link-standard-hovered-state-layer-color`	—	#1b1b1b
`--tanrei-comp-link-standard-icon-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-link-standard-label-color`	`sys.color.link`	#1b1b1b
`--tanrei-comp-link-standard-pressed-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-link-standard-pressed-current-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-link-standard-pressed-current-icon-color`	—	#1b1b1b
`--tanrei-comp-link-standard-pressed-current-label-color`	—	#1b1b1b
`--tanrei-comp-link-standard-pressed-current-state-layer-color`	—	#1b1b1b
`--tanrei-comp-link-standard-pressed-icon-color`	—	#4b4b4b
`--tanrei-comp-link-standard-pressed-label-color`	—	#1b1b1b
`--tanrei-comp-link-standard-pressed-state-layer-color`	—	#1b1b1b
`--tanrei-comp-link-standard-state-layer-color`	`comp.link.standard.label.color`	#1b1b1b
`--tanrei-comp-link-underline-offset`	`sys.space.space25`	2px
`--tanrei-comp-link-underline-visibility`	`sys.behavior.link-underline`	0
`--tanrei-comp-link-underline-width`	`sys.border.hairline`	1px

फ़िक्स्चर

मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।

`variant: standard` (43)

in-text

href: /components/button/

in-text-wrapping

href: /guides/accessibility/

in-text-wrapping-rtl

href: /guides/accessibility/ direction: rtl

in-text-new

href: https://example.com/tanrei target: new targetLabel: opens in a new tab

in-text-new-rtl

href: https://example.com/tanrei target: new targetLabel: يفتح في علامة تبويب جديدة direction: rtl

long-address

href: https://example.com/tanrei/design-system… external: off

standalone

href: /getting-started/ standalone: true

standalone-leading-icon

href: /tokens.zip standalone: true slots: icon

standalone-trailing-icon

href: /foundations/tokens/ standalone: true iconPosition: trailing slots: icon

standalone-trailing-icon-rtl

href: /foundations/tokens/ standalone: true iconPosition: trailing direction: rtl slots: icon

standalone-wrapping

href: /foundations/tokens/ standalone: true iconPosition: trailing slots: icon

standalone-new

href: https://example.com/tanrei target: new targetLabel: opens in a new tab standalone: true

standalone-new-leading-icon

href: https://example.com/tanrei target: new targetLabel: opens in a new tab standalone: true slots: icon

standalone-new-trailing-icon

href: https://example.com/tanrei target: new targetLabel: opens in a new tab standalone: true iconPosition: trailing slots: icon

icon-only

href: #installation label: Link to Installation slots: icon

icon-only-new

href: https://example.com/tanrei target: new targetLabel: opens in a new tab label: Source code slots: icon

icon-only-rtl

href: #installation label: رابط إلى التثبيت direction: rtl slots: icon

current

href: /components/ standalone: true current: true

current-leading-icon

href: /components/ standalone: true current: true slots: icon

disabled

href: /page/0/ standalone: true disabled: true

disabled-new

href: https://example.com/tanrei target: new targetLabel: opens in a new tab disabled: true

disabled-icon-only

href: #installation disabled: true label: Link to Installation slots: icon

ltr-label-rtl

href: https://example.com/tanrei external: off standalone: true direction: rtl

underline-always

href: /components/button/ underline: always

underline-hover

href: /components/button/ underline: hover

underline-never

href: /components/button/ underline: never

standalone-underline-hover

href: /getting-started/ underline: hover standalone: true

standalone-underline-never

href: /getting-started/ underline: never standalone: true

external

href: https://example.com/tanrei external: on externalLabel: external link

external-site-icon

href: https://example.com/tanrei external: on externalLabel: external link siteIcon: fixtures/site-icon.png

external-standalone

href: https://example.com/tanrei external: on externalLabel: external link standalone: true

external-standalone-site-icon

href: https://example.com/tanrei external: on externalLabel: external link siteIcon: fixtures/site-icon.png standalone: true

external-standalone-underline-never

href: https://example.com/tanrei external: on externalLabel: external link siteIcon: fixtures/site-icon.png underline: never standalone: true

external-wrapping

href: https://example.com/tanrei external: on externalLabel: external link siteIcon: fixtures/site-icon.png

external-new

href: https://example.com/tanrei target: new targetLabel: opens in a new tab external: on siteIcon: fixtures/site-icon.png

external-forced

href: /partners/ external: on externalLabel: external link

external-suppressed

href: https://example.com/tanrei external: off siteIcon: fixtures/site-icon.png

external-mail

href: mailto:[email protected]

external-leading-icon

href: https://example.com/tanrei external: on externalLabel: external link siteIcon: fixtures/site-icon.png standalone: true slots: icon

external-trailing-icon

href: https://example.com/tanrei external: on externalLabel: external link siteIcon: fixtures/site-icon.png standalone: true iconPosition: trailing slots: icon

external-site-icon-failed

href: https://example.com/tanrei external: on externalLabel: external link siteIcon: fixtures/missing.png

external-disabled

href: https://example.com/tanrei external: on siteIcon: fixtures/site-icon.png standalone: true disabled: true

external-rtl

href: https://example.com/tanrei external: on externalLabel: رابط خارجي siteIcon: fixtures/site-icon.png direction: rtl

`variant: inverse` (7)

inverse

href: /changes/ variant: inverse

inverse-new

href: https://example.com/tanrei target: new targetLabel: opens in a new tab variant: inverse

inverse-current

href: /components/ variant: inverse standalone: true current: true

inverse-disabled

href: /page/0/ variant: inverse standalone: true disabled: true

inverse-icon-only

href: #installation variant: inverse label: Link to Installation slots: icon

inverse-underline-never

href: /changes/ variant: inverse underline: never

external-inverse

href: https://example.com/tanrei external: on externalLabel: external link siteIcon: fixtures/site-icon.png variant: inverse

इससे जनरेट किया गया: specs/link.spec.json, tokens/comp/link.tokens.json, design/tokens/

वेब क्या अलग ढंग से बनाता है

लिंक के टेक्स्ट के पीछे का कंटेनर ख़ुद टेक्स्ट का बॉक्स है (फ़ॉन्ट की अपनी ऊँचाई), पूरी लाइन हाइट नहीं।
ग्लिफ़ या निशान वाला लिंक जब कई पंक्तियों में जाता है, तो वह एक ही बॉक्स के रूप में बनता है जो पंक्तियों के सिरों पर कटा होता है। जिस लिंक में ये नहीं हैं, उसके चारों कोने हर पंक्ति पर होते हैं।
ग्लिफ़, निशान या बाहरी लिंक के निशानों वाला अकेला लिंक अपने लेबल को लेआउट की दिशा में रखता है, लेबल के अपने पहले अक्षर की दिशा में नहीं।
स्टाइलशीट पते के बारे में कोई गणना नहीं करती: वह data-external के लिए निशान बनाती है। यह ऐट्रिब्यूट वहीं लिखें जहाँ पेज बनता है (रेंडर किए गए Markdown के लिए @tanrei/web/links का बिल्ड चरण markExternalLinks() यह करता है), और निशान पहले पेंट में ही होते हैं।
पैकेज की स्क्रिप्ट के साथ, बिना data-external वाले उस ऐंकर पर जिसका पता साइट से बाहर ले जाता है, ब्राउज़र में निशान लगता है। ये निशान पहले पेंट के बाद आते हैं, और हर निशान अपनी पंक्ति में अपने बाद की चीज़ों को टेक्स्ट के साइज़ और गैप जितना खिसका देता है। जिस पेज में न ऐट्रिब्यूट है न स्क्रिप्ट, वह बाहरी लिंक का कोई निशान नहीं दिखाता।
जिस ब्राउज़र में स्टाइल कंटेनर क्वेरी नहीं हैं, उसमें स्क्रिप्ट दोनों चुनाव पूरे पेज के लिए पढ़ती है। किसी हिस्से का अपना मान वहाँ नहीं दिखता, और स्क्रिप्ट के बिना हर चुनाव अपना पहला मान होता है: always, और दोनों निशान।
जिस डिज़ाइन सिस्टम में दबाने पर फ़ीडबैक रिपल है, उसमें कई पंक्तियों पर चलने वाला लिंक उसकी जगह ओवरले से जवाब देता है।
पैकेज की स्क्रिप्ट के बिना स्टाइलशीट हर स्टेट बनाती है, और दबाने पर फ़ीडबैक ओवरले होता है।

दिशानिर्देश

लिंक, या बटन

कंपोनेंट	यह क्या है	कब इस्तेमाल करें
लिंक	वह टेक्स्ट जो कहीं ले जाता है, अपने आसपास के टेक्स्ट स्टाइल में, डिज़ाइन सिस्टम के चुनाव के अनुसार अंडरलाइन के साथ	वाक्य के भीतर का वाक्यांश, टेक्स्ट की वह पंक्ति जो एक गंतव्य है, हेडिंग के बग़ल का ग्लिफ़
गंतव्य वाला बटन	वह लिंक जो बटन के रूप में बनता है	गंतव्य स्क्रीन की क्रियाओं में से एक है: “शुरुआत करें”, “सोर्स देखें”
text बटन	एक बटन	वह कुछ करता है और कहीं नहीं ले जाता, चाहे उसे कितना भी टेक्स्ट जैसा दिखना हो

वाक्य के भीतर, या अकेला

data-standalone से ऐसा कुछ नहीं बदलता जो व्यक्ति को दिखे। यह बताता है कि लिंक टेक्स्ट की किसी पंक्ति का हिस्सा नहीं है, इसलिए उसका हिट एरिया न्यूनतम टार्गेट तक पहुँच सकता है और ऊपर-नीचे की पंक्तियों के लिए किया गया दबाना नहीं छीनता। इसे पैराग्राफ़ के नीचे के लिंक, टेबल के सेल के लिंक या लिंक की पंक्ति के लिए इस्तेमाल करें। वाक्य के भीतर इसे न लगाएँ।

hover और never उन्हीं लिंक के लिए हैं जो अकेले खड़े होते हैं: नेविगेशन की लिस्ट, फ़ुटर, संबंधित पेजों की पंक्ति। लिस्ट में उनकी जगह ही बता देती है कि वे क्या हैं। उन लिंक पर data-underline सेट करें, या उस हिस्से को कंपोनेंट टोकन का अपना मान दें, और अपने वाक्यों के लिंक अंडरलाइन के साथ रहने दें।

करें

ऐसा लेबल लिखें जो आसपास के वाक्य के बिना भी बताए कि लिंक कहाँ ले जाता है: “इंस्टॉलेशन गाइड”, “यहाँ” नहीं।
data-variant="inverse" सिर्फ़ sys.color.inverse-surface पर इस्तेमाल करें। हल्के कंटेनर (स्थिति का कंटेनर, secondary-container) पर स्टैंडर्ड लिंक ही ठीक है।
नेविगेशन के एक सेट में ज़्यादा से ज़्यादा एक लिंक को मौजूदा के रूप में चिह्नित करें, और कौन-सा, यह उस सेट को तय करने दें।
दो अकेले लिंक के बीच sys.target.spacing छोड़ें, या उनकी पंक्तियों को एक टार्गेट जितना ऊँचा रखें।
किसी साइट का आइकन ऐसी फ़ाइल के रूप में दें जिसे आपकी अपनी साइट सर्व करती है। @tanrei/web/links का resolveSiteIcons() उन्हें साइट के बिल्ड के समय बनाता है, इसलिए किसी पाठक का ब्राउज़र किसी दूसरे पक्ष से कुछ नहीं माँगता।
बाहरी लिंक के शब्द एक बार सेट करें (setExternalLabel(), या बिल्ड चरण का externalLabel), अपने प्रॉडक्ट की भाषा में। ये शब्द आपके प्रॉडक्ट के शब्दों की कुंजी externalLabel हैं: setWords({ externalLabel: '…' }) यही शब्द देता है, और { lang } के साथ हर भाषा के लिए अलग।

न करें

जिस लेयर में लिंक का रंग उसके टेक्स्ट का रंग है, उसमें सामान्य स्टेट की अंडरलाइन न हटाएँ। डिफ़ॉल्ट सिस्टम में लिंक का रंग ख़ुद टेक्स्ट का ही रंग है, सभी छह स्कीम में उसके मुक़ाबले 1.00:1, इसलिए सिर्फ़ अंडरलाइन ही बताती है कि यह लिंक है। जहाँ चुनाव hover या never है और लिंक का रंग टेक्स्ट के रंग से 3:1 से कम दूर है, वहाँ डिफ़ॉल्ट सिस्टम में बिल्ड विफल हो जाता है, और प्रॉडक्ट की लेयर में वह चेतावनी देता है।
टच स्क्रीन पर यह भरोसा न करें कि hover लिंक को ज़ाहिर कर देगा। वहाँ होवर नहीं होता, इसलिए hover पर वही नियम लागू होता है जो never पर।
किसी साइट का आइकन ब्राउज़र में उस साइट से, या किसी आइकन सेवा से, लोड न करें। तब हर पाठक का ब्राउज़र उस पक्ष को बता देगा कि कौन-सा पेज पढ़ा जा रहा है।
लिंक को गंतव्य की जगह click हैंडलर न दें। बिना पते वाला ऐंकर सादे टेक्स्ट के रूप में बनता है और डीबग बिल्ड में रिपोर्ट किया जाता है।
लिंक को ऐसे कंट्रोल के भीतर न रखें जो पूरा का पूरा दबाया जाता है (लिंक कार्ड, गंतव्य वाला लिस्ट आइटम), और न किसी कंट्रोल को लिंक के भीतर।
खोले जा चुके लिंक को अलग स्टाइल न दें। जिस प्रॉडक्ट को “पहले खोला जा चुका है” दिखाना हो, वह इसे अपने डेटा से, टैग या ग्लिफ़ के ज़रिए दिखाता है।

सुलभता

रोल: link
लेबलिंग: A link with a label is named by the label's text, which should say where it goes without the sentence around it ("the installation guide", not "here"). A link that is a glyph alone is named by label, which is required; its glyph is decorative to assistive technology. A link has at most one description: while target is new it is targetLabel ("opens in a new tab"); otherwise, while the link is external and marked, it is externalLabel or the product's words for every external link ("external link"). The mark, the arrow and the site icon are decorative. A current link carries the current state; nothing is added to its name.
न्यूनतम टार्गेट: दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया
`Tab`	Moves focus to the link. A disabled link is passed.
`Enter`	Follows the link. Space does what it does on any link (on the web it scrolls the page).

A link in running text is told from the words beside it by more than color (WCAG 1.4.1). In the default system the link color is the primary's, which is the color of the text itself — 1.00:1 against sys.color.on-surface in all six schemes — so the underline is the only thing that says "link": the default system's choice is always, and the build fails if it is changed while the colors stand as they are.
When the underline may be left out at rest. A design system or a product may choose hover or never where its link color stands 3:1 or more apart from its text color in every scheme and still keeps its own contrast on the surfaces; a cue then remains for the pointer and the keyboard — the line itself under hover, the state layer and the focus ring under never. The build checks the ratio for the system-wide choice and for the component's own (an error in the default system, a warning in a product's layer). It cannot check one link set apart by the underline prop: that is the product's to judge, and a debug build reports an in-text link that fails it (LNK-29). hover is not a weaker never on a touch screen: there is no pointer to bring the line back, so the two are held to the same ratio.
Links that stand by themselves — a list of navigation, a footer, a row of related pages — are what hover and never are for: their place in a list says what they are, and no word beside them competes. Set underline on those links, or give the region its own value of the component token, and leave the links of sentences underlined.
Forced colors draw the underline whatever was chosen (LNK-22): the link color is then the platform's, and nothing the design system measured still holds.
An external link says so twice, once for the eye and once in words: the arrow after the label, and a description read after the name (LNK-34). The arrow is not the mark of a new context: a link that leaves the site and opens where the person is shows arrow_outward; one that opens a new tab or window shows open_in_new, external or not, and its description is targetLabel. A link never shows both, and is never described twice.
The site's picture is decoration: it has no text alternative and no role, it is never the only thing that marks a link as external (the arrow is always there with it), and a link without one loses nothing a person needs. It is a picture someone else drew, so its contrast against the surface is not the design system's to hold; a picture that cannot be seen on a dark or a light surface is given a ground where it is made, not by the link.
A link calls no one. It draws only what the product gave it and reaches no other site before the person follows it (LNK-35): reading a page that links to a site tells that site nothing.
The target. A link inside a sentence or a line of text takes WCAG 2.5.8's exception for inline targets: its hit area is its text, and extending it would take presses meant for the lines above and below. A link that stands by itself (standalone) and a link that is a glyph alone are not in a sentence, so their hit area is extended to sys.target without changing what is drawn (LNK-17); the product leaves sys.target.spacing between two of them, or lets their rows be a target high.
A link is not a button. What leads nowhere and does something on the page is a Button — the text variant where it should read as quietly as text — and it is activated by Space as well as Enter. A link is never given a press handler in place of a destination (LNK-21).
No visited state (LNK-20). A product whose content is a list of places people work through (search results, a reading list) marks what was opened from its own data, with a Tag or a glyph, which every platform can draw and assistive technology can read.
The current link stays a link: it can be focused and followed, and leads to the top of the page the person is on. It is told from its neighbours by having no underline and a heavier weight, and by its state for assistive technology. A set that should not let its current item be followed (the last item of a trail) draws it as text, not as a link.
A disabled link is not in the focus order, as a disabled Button is not. Where people must learn why a place cannot be reached, say so in text beside it.
A link does not hold another link, a button or any other control, and is not placed inside one. Inside an element that is pressed as a whole (a link card, a list item with a destination) the text is that element's, not a second link.
Text must remain readable at 200% text size: the link is text and grows and wraps with it; nothing about it has a fixed size (LNK-23).
Contrast in the default system: sys.color.link on every surface role is held to 4.5:1 (7:1 in the high-contrast schemes) by the token invariants, and sys.color.inverse-link on sys.color.inverse-surface likewise. On the quiet containers (secondary-container and the four status containers) the link color measures 4.6:1 or more in every scheme today; that pair is not yet an invariant. The focus ring is held to 3:1 against every surface.
How a state looks is a value decision of the active design system (a state-layer mix in Tanrei, a dim or no hover at all elsewhere). The link reads the state's tokens and never computes the effect itself.

इससे जनरेट किया गया: specs/link.spec.json, tokens/sys/measure.tokens.json

कंपोनेंट क्या सँभालता है

यह ब्राउज़र का अपना लिंक है: लिंक का रोल, खोलने के लिए Enter, कॉन्टेक्स्ट मेन्यू, नए टैब में खोलना, और ऐसा लिंक जो स्क्रिप्ट के बिना काम करता है।
डिफ़ॉल्ट सिस्टम में अंडरलाइन इसे बग़ल के टेक्स्ट से अलग दिखाती है, रंग पर निर्भर हुए बिना, हर स्कीम में। फ़ोर्स्ड कलर्स में अंडरलाइन बनती है, चाहे जो भी चुना गया हो।
बाहरी लिंक का एक ही विवरण होता है, जो उसके नाम के बाद पढ़ा जाता है: नए टैब के लिए aria-description, नहीं तो बाहरी लिंक के शब्द। तीर और साइट का आइकन सहायक तकनीक से छिपे रहते हैं।
कीबोर्ड की फ़ोकस रिंग हर पंक्ति पर लिंक के हिस्से के चारों ओर बनती है।
अकेला लिंक और सिर्फ़ ग्लिफ़ वाला लिंक अपना हिट एरिया न्यूनतम टार्गेट तक बढ़ाते हैं। वाक्य के भीतर का लिंक अपने टेक्स्ट तक ही रहता है।
निशान, और लेबल के बग़ल का ग्लिफ़, सहायक तकनीक से छिपे रहते हैं।
पैकेज की स्क्रिप्ट के साथ, नया टैब खोलने वाले लिंक को noopener मिलता है, और डीबग बिल्ड बिना नाम, बिना विवरण और ऐसे पते की रिपोर्ट करता है जो गंतव्य नहीं है। वह वाक्य के भीतर के ऐसे लिंक की भी रिपोर्ट करता है जिसमें सामान्य स्टेट में अंडरलाइन नहीं है और जो अपने टेक्स्ट से 3:1 से कम दूर है, बिना शब्दों वाले बाहरी लिंक की (पेज के लिए एक बार), और साइट के ऐसे आइकन की जो किसी दूसरे ओरिजिन से लोड होता है।

आपको क्या करना है

सिर्फ़ ग्लिफ़ वाले लिंक को aria-label से नाम दें, और हर ग्लिफ़ पर aria-hidden="true" लगाएँ।
लिंक नया टैब खोलता है, यह aria-description से कहें, अपने प्रॉडक्ट की भाषा में। Tanrei अपना कोई शब्द साथ नहीं देता।
अक्षम लिंक को बिना href वाले ऐंकर के रूप में लिखें, role="link" और aria-disabled="true" के साथ। वह फ़ोकस के क्रम से बाहर हो जाता है, इसलिए उसके बग़ल के टेक्स्ट में बताएँ कि उस जगह क्यों नहीं पहुँचा जा सकता।
aria-current उस लिंक पर सेट करें जो उस पेज या सेक्शन का नाम लेता है जहाँ व्यक्ति अभी है।
चलते टेक्स्ट के भीतर hover और never सिर्फ़ वहाँ इस्तेमाल करें जहाँ लिंक का रंग टेक्स्ट के रंग से 3:1 या उससे ज़्यादा दूर हो, और फिर भी सरफ़ेस से 4.5:1 पर हो। लगभग सफ़ेद सरफ़ेस पर लगभग काले टेक्स्ट के साथ यह बीच के टोन की एक सँकरी पट्टी है।
लिंक साइट से बाहर ले जाता है, यह शब्दों में कहें: लिंक पर aria-description से, या उन शब्दों से जो आप हर बाहरी लिंक के लिए एक बार सेट करते हैं। Tanrei अपना कोई शब्द साथ नहीं देता। जो लिंक बाहरी है और नया टैब भी खोलता है, उसके एक ही विवरण में दोनों बातें कहें।
साइट का आइकन alt="" के साथ लिखें। वह सजावट है: लिंक का नाम लेबल देता है, और उस पर निशान तीर लगाता है।

GitHub पर सोर्स कोड और इश्यू