` element) without interactive styling:
```js
---
type: example
---
This is a Link with no href or onClick: I look like plain text
```
### Size
The `size` prop controls the font size, line height, and icon size, icon gap. Available sizes are `small`, `medium`, and `large`.
```js
---
type: example
---
} variant="standalone" href="https://instructure.github.io/instructure-ui/" size="small">
Link small
} variant="standalone" href="https://instructure.github.io/instructure-ui/" size="medium">
Link medium
} variant="standalone" href="https://instructure.github.io/instructure-ui/" size="large">
Link large
```
### Variant
The `variant` prop controls the text decoration and intended use case. Available variants are `inline` (underlined, for use within text) and `standalone` (no underline, for standalone links).
Use the `variant` prop in combination with the `size` prop to control both the appearance and size of the link.
```js
---
type: example
---
In a line of text you should use the } href="https://instructure.github.io/instructure-ui/">inline link variant.
If the link is standalone (not in a text), use the standalone variant:
} href="https://instructure.github.io/instructure-ui/">standalone
```
#### Deprecated variant values
**The following variant values are deprecated and will be removed in a future version:**
- `inline-small`
- `standalone-small`
These deprecated values are still supported for backward compatibility but will trigger console warnings. Please update your code to use the new `variant` + `size` prop combination.
```js
---
type: code
---
// Deprecated (still works but triggers warning)
Link
Link
// Recommended
Link
Link
```
### 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.
```
### 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')}
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.
```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={}>
Descriptive text
.
```
### Theme overrides
Examples showing how [theme overrides](using-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 }
color="link-inverse"
themeOverride={{
textColor: 'red',
textHoverColor: 'magenta',
onColorTextColor: 'orange',
onColorTextHoverColor: 'lime',
fontWeight: 700
}}
>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
```