2.20.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 —
  • —
display

Display either an inline, block, 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
  • start or center
text

Renderable text content for the link.

 string , object , array —
  • —
url

Contains a URL that the link points to. This may also be passed as part of attributes.

 string —
  • —
target

Specifies where to display the linked URL. This may also be passed as part of attributes.

 string —
  • —
icon

Bolt icon. Accepts the same options as Bolt Icon Component @bolt-components-icon plus an additional 'position' parameter that determines placement within the button.

 object —
  • @bolt-components-icon/icon.schema.json > Object details
    • attributes

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

      Type: object

      • —
    • name

      Icon name

      Type: string

      • —
    • 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!

      Type: string

      • none, circle, square
    • size

      Icon size.

      Type: string

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

      Type: string

      • auto, teal, blue, indigo, yellow, orange, gray, green, white, pink
isHeadline

Whether this link should get special headline styling treatment.

 boolean —
  • —
href

Use url instead.

 —
  • —
Debug Panel