2.17.0

Link

Link Component

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

Install via NPM
npm install @bolt/components-link
  {% include "@bolt-components-link/link.twig" with {
  text: "This is a link",
  url: "https://pega.com"
} only %}

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