link

link docs

Link

Pega branded actionable text.

Published Last updated: 3.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-link/link.twig" with {
  text: "This is a link",
  url: "https://pega.com"
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

object —
  • —
text

Renderable content (i.e. a string, render array, or included pattern) for the link.

string , object , array —
  • —
url

Optional. Contains a URL that the chip points to. When URL is present, tag changes to a, otherwise tag would be span.

string —
  • —
target

A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present.

string _self
  • _blank , _self , _parent , _top , framename
display

Display either an inline link or flex link (icons can hang on either side).

string inline
  • inline , flex , block
valign

Controls the vertical alignment of text and icon.

string center
  • center or start
isHeadline

Whether this link should get special headline styling treatment.

boolean —
  • —
icon

Icon data as expected by the icon component. Accepts an additional position prop that determines placement within the link.

object —
    • position

      Where to position the icon within the button

      • before or after
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

      • —
    • name

      Icon name

      • —
    • background

      Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than none will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes!

      • none , circle , square
    • size

      Icon size.

      • xsmall , small , medium , large , xlarge
    • color

      Icon color palette. Picking an option other than auto will override the default colors based on the color theme is placed within.

      • auto , teal , navy , yellow , orange , gray , pink , berry , wine , violet
onClick

When used with onClickTarget, an event to fire on the targeted elements when this element is clicked. When used without onClickTarget, arbitrary javascript to execute when this element is clicked.

string —
  • —
onClickTarget

Requires onClick. A CSS selector for elements that the onClick event will fire on when this element is clicked.

string —
  • —
href
(deprecated)

Use url instead.

— —
  • —
Install Install
  npm install @bolt/components-link
Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue

link

This is a text link

link display variations

Inline link

This is an inline link with an icon before, and this is an inline link with an icon after. 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.

Flex link

This is a flex link with an icon. Very important to note that flex links are never to be mixed inline within a paragraph of non-link text because the text wraps differently and the icon hangs to the side.

This is a flex link with an icon. Very important to note that flex links are never to be mixed inline within a paragraph of non-link text because the text wraps differently and the icon hangs to the side.

Block link

This is a block link with an icon. Very important to note that block links are never to be mixed inline within a paragraph of non-link text because they act as a paragraph themselves.

This is a block link with an icon. Very important to note that block links are never to be mixed inline within a paragraph of non-link text because they act as a paragraph themselves.

link icon variations

Icon before (default)

This is a link

Icon after

This is a link

Different icons

This is a link

This is a link

This is a link

This is a link

This is a link

This is a link

This is a link

link valign variations

Note that valign only works with flex link (with the icon hanging to the side), it has no effects on inline link.

Valign: center

Vertically align center. This will align the text and icon to the center relative to the height of the link.

Valign: start

Vertically align start. This will align the text and icon to the start relative to the height of the link.

link theme variations

Headline Link with Default Icon

Text link

Headline Link with Default Icon

Text link

Headline Link with Default Icon

Text link

Headline Link with Default Icon

Text link

link with button element

Link with Button element

When you want the appearance of Link but the on-click behavior is handled separately (by Tooltip for example), omit the url property and the Link component will internally render a <button>.

link with web component

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://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.

This is a link with icon

This is a link with icon

<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>

link with web component html attributes

Adding Additional HTML Attributes to Link
Any initial HTML attributes on a <bolt-link>'s inner <a> tag will be retained with two exceptions: inline styles (auto-removed to avoid styling issues) and any HTML attributes that are in direct conflict with the props passed into the web component.

Links retain most HTML attributes

<bolt-link> <a href="https://pega.com" data-analytics="click"> Links retain most HTML attributes </a> </bolt-link>
Most (But Not All) HTML Attributes Supported For example, the url prop passed along to this web component will override any initial HTML href attribute present.

Props > Initial HTML Attributes

<bolt-link url="https://www.google.com"> <a href="https://pega.com" style="color: red"> Props > Initial HTML Attributes </a> </bolt-link>