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.
<bolt-link>
<a href="https://pega.com" target="_blank">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://pega.com">inline link</a></bolt-link>, and this is an <bolt-link><a href="https://pega.com"><bolt-icon slot="before" name="info-open"></bolt-icon>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.
<p>
<bolt-link><a href="https://pega.com"><bolt-icon slot="before" name="info-open"></bolt-icon>This is a link with icon</a></bolt-link>
</p>
<p>
<bolt-link><a href="https://pega.com">This is a link with icon<bolt-icon slot="after" name="info-open"></bolt-icon></a></bolt-link>
</p>