2.21.0

Link

Link Component

Published

History
View changes
Install
yarn add @bolt/components-link
Source code
View on Github
Dependencies

Overview

Text link styles. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-link

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

If present, users will be directed to this URL when clicking this element.

 string —
  • —
target

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

 string —
  • _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.

      • 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, blue, indigo, yellow, orange, gray, green, white, pink
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

Use url instead.

 —
  • —
Debug Panel