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)

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


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

string inline
  • inline or flex

Controls the vertical alignment of text and icon.

string center
  • start or center

Renderable text content for the link.

string , object , array

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


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


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

  • @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
      • academy, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-operations, calendar, careers, case-management, chart-bar, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-circled, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, face-happy, face-sad, facebook, facebook-solid, field-service, field-service-gray, filter, financial, full-screen, github, global, government, healthcare, hospitality, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin, linkedin-solid, lock, manufacturing, map-pin, map-pin-solid, marketing, marketing-gray, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
    • background

      Background shape. This applies only to 'xlarge' icons.

      Type: string
      • circle or square
    • size

      Icon size.

      Type: string
      • small, medium, large, xlarge
    • color

      Icon color. Currently only support default (black) and teal.

      Type: string
      • teal or blue

Whether this link should get special headline styling treatment.


Use url instead.