Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:
The TextLink component renders an anchor tag <a>
that takes users to another page, external or internal to Grafana.
In this documentation you can find:
Do not use ‘primary’ color in a standalone link unless it is a special use case such as the ‘Dashboard list’, menu items or similar.
Do not override any styles in any way. Instead, ask the Design System team for an improvement of this component.
Do not attempt to add a new icon. You should fulfil a contribution path to first add the icon to our Design System and then use it in this component.
Within Grafana, there are two different types of text links, 'inline' or 'standalone', whether they are wrapped by text or being a standalone element.
Both inline or standalone text links will redirect the user to a specific page, therefore, depending on this they can be internal or external.
Internal: Redirect the user to a page inside Grafana.
External: Redirect the user to a page outside Grafana. The page will open on a new window. By default, an external text link will show the ‘external-link-alt’ icon.
The following is the default behaviour and so, it will be applied according to its type.
Example: We should take into account that through the color prop the user will be able to change this value, but the rest will be kept. So, in this example, if the user renders an external and standalone text link setting the color value to 'primary' the result will be a text link 'white' in dark theme or 'black' in light theme, as set by the user, and not underlined at first while blue and underlined when onhover, as it inherits from the standalone default behaviour.
<TextLink href="https://google.es" color="primary" inline={false} external> This an external standalone link example </TextLink>
By default, external text links will show an external-alt-icon
. If by design reasons, the user needs to set another icon it can be done through the correspondent prop.
<TextLink href="https://google.es" external> This an external with the default icon </TextLink>
Both, external and internal links can show a specific icon using the icon
prop.
<TextLink href="https://google.es" icon="google" external> This an external with a specific icon </TextLink>
Name | Description | Default |
---|---|---|
href* | url to which redirect the user, external or internal string | - |
color | Color to use for text "link""primary""secondary""disabled""maxContrast" | "link" |
external | Specify if the link will redirect users to a page in or out Grafana boolean | false |
inline | True when the link will be displayed inline with surrounding text, false if it will be displayed as a block. Depending on this prop correspondant default styles will be applied boolean | true |
variant | The default variant is 'body'. To fit another styles set the correspondent variant as it is necessary also to adjust the icon size. code is excluded, as it is not fit for links."body""h1""h2""h3""h4""h5""h6""bodySmall" | "body" |
weight | Override the default weight for the used variant "medium""bold""light""regular" | - |
icon | Set the icon to be shown. An external link will show the 'external-link-alt' icon as default. "play""google""microsoft""github""gitlab""okta""discord""hipchat" | - |
Links to related components: