Warning! The Link component is deprecated. No new features will be added to this component. See each page under Components/Link section in the navigation to reference old documentation. For any new instances of a link please use the Text Link element.
Web Component Usage Bolt Link is a web component that renders a semantic link with Bolt styles. To make a simple link, wrap a semantic <a> element with a <bolt-link> element. Common HTML attributes such as href and target placed on the <a> would work as expected.
This is a link 
<bolt-link>
  <a href="https://google.com" target="_blank" rel="noopener">This is a link</a>
</bolt-link>
Inline Links When using inline links, do not add line breaks in or around your <bolt-icon> tag. Inline links will show the white-space added by line breaks, so removing them is necessary to eliminate unwanted space.

This is an inline link, and this is an inline link with an icon. Inline links are truly inline, which means the text can wrap to a second line and the icon falls on the baseline either before or after the text.

<p>This is an <bolt-link><a href="https://google.com">inline link</a></bolt-link>, and this is an <bolt-link><a href="https://google.com"><span slot="after"><!-- Icon or image markup --></span>inline link with an icon</a></bolt-link>. Inline links are truly inline, which means the text can wrap to a second line and the icon falls on the baseline either before or after the text.</p>
Links with Icons To add icons to <bolt-link>, place a <bolt-icon> next to your link text. For icons to have the correct spacing, you must add the slot attribute to <bolt-icon>. The slot value can be before or after.

This is a link with icon

This is a link with icon

<p>
  <bolt-link><a href="https://google.com"><span slot="before"><!-- Icon or image markup --></span>This is a link with icon</a></bolt-link>
</p>
<p>
  <bolt-link><a href="https://google.com">This is a link with icon<span slot="after"><!-- Icon or image markup --></span></a></bolt-link>
</p>