Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Grafana Saga - text-link
Getting started
Grafana Saga
Grafana UI
Pro
Components
Alert
Badge
Card
Checkbox
Components Status
Field
File Dropzone
Filter Pill
Inline Field
Input
Interactive Table
Modal
Pagination
Plugin Signature
Radio Button
Radio Button Group
Select
Switch
Text
Text Link
Textarea
Toggletip
Tooltip
<ul> <li>Use the default styles as the first and main option as they are designed to be accessible and consistent</li> <li>Use the external icon (the default one) when the TextLink directs to an external page as its meaning is broadly known</li> <li>In the instance the default icon does not fit, please use one of the icons from our library</li> </ul> <h3>Don'ts</h3> <ul> <li>Do not use the 'primary' color in a standalone link unless it is a special use case such as the 'Dashboard list', menu items or similar</li> <li>Do not override any styles in any way. Instead, ask the Design System team for an improvement of this component</li> <li>Do not attempt to add a new icon. You should follow a contribution path to first add the icon to our Design System and then use it in this component</li> </ul> <h2>Content</h2> <ul> <li>The TextLink component mainly contains text and, optionally, an icon</li> <li>Make link text abundantly clear as to what the subsequent page is about</li> <li>Avoid using phrases such as Click here, More, and Read more unless they are within a card component or similar</li> <li>Aim for a maximum of two links per paragraph</li> <li>Keep link text short and concise</li> <li>Never start with articles: a, an, or the</li> <li>Avoid linking whole sentences; aim for a maximum of four to five words</li> </ul> <h2>Types</h2> <p>Within Grafana, there are two different types of text links: inline or standalone. They can either be wrapped by text or serve as a standalone element.</p> <table class="types-table"> <thead> <tr> <th>Types</th> <th>Purpose</th> </tr> </thead> <tbody> <tr> <td><strong>Inline</strong></td> <td>It is part of a broader text. It will be surrounded by text, before, after or in both directions. Although it can show an icon at its end, we advise not to do that</td> </tr> <tr> <td><strong>Standalone</strong></td> <td>It is a block not surrounded immediately by more text</td> </tr> </tbody> </table> <h3>Subtypes</h3> <table class="types-table"> <thead> <tr> <th>Subtypes</th> <th>Purpose</th> </tr> </thead> <tbody> <tr> <td><strong>Internal</strong></td> <td>Redirect the user to a page inside Grafana</td> </tr> <tr> <td><strong>External</strong></td> <td>Redirect the user to a page outside Grafana. The page will open a new window as we use target="_blank" and rel="noreferrer" to ensure that it is a safe cross-origin destination link. By default, an external text link will show the external-link-alt icon</td> </tr> </tbody> </table> <h2>Examples</h2> <div class="demo-section"> <h3>Inline Link</h3> <p>This is a paragraph with an <a href="#" class="textlink">inline text link</a> that connects to another page.</p> <h3>Standalone Link</h3> <a href="#" class="textlink standalone">Standalone text link</a> <h3>External Link</h3> <a href="https://grafana.com" class="textlink" target="_blank" rel="noreferrer"> Visit Grafana <svg class="icon" viewBox="0 0 16 16"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 11.75 14h-8.5A1.75 1.75 0 0 1 1.5 12.25v-8.5C1.5 2.784 2.284 2 3.75 2Z"/> <path d="M8.5 1.75A.75.75 0 0 1 9.25 1h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V3.56L7.22 10.34a.75.75 0 0 1-1.06-1.06L12.94 2.5H9.25a.75.75 0 0 1-.75-.75Z"/> </svg> </a> </div> <h2>Accessibility</h2> <ul> <li>The text that contains the link should be informative</li> <li>The aria-describedby attribute can be used to provide extra text for a screen reader besides the link text</li> <li>Assistive technology may consider an ARIA label to replace the link text, so if there is a need for more context please use aria-describedby</li> </ul> <h2>Related</h2> <div class="related-links"> <a href="#">Button</a> <a href="#">LinkButton</a> <a href="#">IconButton</a> </div> <h2>Further Reading & Sources</h2> <ul> <li><a href="#" class="textlink">Writers Toolkit: Write useful link text</a></li> <li><a href="#" class="textlink">Accessibility: WCAG | Link purpose in content</a></li> </ul> <div class="playground"> <h2>Playground</h2> <p>Interactive component playground would be embedded here</p> <a href="#" class="textlink">Open in Storybook</a> </div> </div> <script> document.addEventListener("DOMContentLoaded", function() { const links = document.querySelectorAll(".textlink"); links.forEach(link => { link.addEventListener("click", function(e) { if (this.getAttribute("href") === "#") { e.preventDefault(); console.log("Link clicked:", this.textContent); } }); }); }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">