--- describes: Link --- ### Where to use Link `Link` is intended for presenting actions **inline with other content**, such as within headings or sentences. Typically those actions navigate the user to a different view. ```js --- type: example ---
The quick brown fox jumps over the lazy dog. jumps
``` ```js --- type: example --- The quick brown fox jumps over the lazy dog. ``` ### Controlled navigation Sometimes a simple `Link ()` with an `href` is not enough for navigation and an `onClick` handler is needed. In this case, the recommended approach is the following ```js --- type: example --- { e.preventDefault() console.log("do navigation") }} forceButtonRole={false} href="#">Go to places ``` ### Variant In order to make it easy to get the most commonly used links, we have the variant prop. It will set all the necessary styles (fontSize, lineHeight, and textDecoration). ```js --- type: example ---
In a line of text you should use the } href="https://instructure.github.io/instructure-ui/">inline link variant.


In a line of text, where the text is smaller, use the } href="https://instructure.github.io/instructure-ui/">inline-small link variant


If the link is standalone (not in a text), use the standalone } href="https://instructure.github.io/instructure-ui/">standalone


If the link is standalone (not in a text), but smaller, use the standalone-small } href="https://instructure.github.io/instructure-ui/">standalone-small
``` ### Adding margin Use the `margin` prop to add space to the left or right of the Link. Because Link displays `inline`, **top and bottom margin will not work**. If you need to add margin to the top or bottom of Link, wrap it inside a ``. ```js --- type: example --- The quick brown fox jumps over the lazy dog. ``` ### Underlines Link's primary use is inline with other content, which is why it is underlined by default. For rare situations where Link needs to appear without surrounding text, the default underline can be configured to only show on hover by making `isWithinText={false}`. **Note: this only applies when outside high contrast mode. When inside high contrast mode, the link will always have an underline.** ```js --- type: example --- I have no default underline ``` ### Truncating text Use [TruncateText](TruncateText) to truncate text within Link. Note this will cause Link to display `inline-flex`, unless an alternate `display` prop is provided. ```js --- type: example --- console.log('clicked')} isWithinText={false} renderIcon={} > {lorem.paragraph()} ``` ### Using icons Use the `renderIcon` property to put an [icon](icons) inside a Link. To position the icon _after_ the link text, change the `iconPlacement` property to `end`. You can also render a Link with just an icon. Don't forget to add text for screen readers, though. NOTE: if you want the icon to have the same `font-size` as the link, do not specify its `size`! ```js --- type: example ---
}>Icon before text with the quick brown fox This Link has an icon and displays inline with text. } iconPlacement="end" > Icon appears after Link text . This is more text after the link. This Link consists of only an icon  console.log('clicked!')} renderIcon={IconUserLine}> Descriptive text .
``` ### Theme overrides Examples showing how theme overrides work for Link: ```js --- type: example ---
The quick brown fox jumps over the lazy dog.
``` ```js --- type: example --- The quick brown fox jumps over the lazy dog.
The quick brown fox } themeOverride={{ focusOutlineWidth: '0.5rem', focusOutlineStyle: 'dashed', focusOutlineBorderRadius: '0', focusInverseIconOutlineColor: 'red' }} >jumps over the lazy dog. ``` ### Guidelines ```js --- type: embed ---
Use color="link-inverse" when a Link appears on a dark background to ensure adequate contrast Links must have a non-empty href attribute to be considered true links and to be accessible to keyboard users
```