2.9.2

Link

Link Component

Published

History

View changes

Install

yarn add @bolt/components-link

Source code

View on Github

Dependencies

@bolt/components-icon

@bolt/core

ajv

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 link or flex link (icons can hang on either side).	`string`	`inline`	`inline`, `flex`
Valign	Controls the vertical alignment of text and icon.	`string`	`center`	`start`, `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 `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`, `square` `size` Icon size. Type: string `small`, `medium`, `large`, `xlarge` `color` Icon color. Currently only support default (black) and teal. Type: string `teal`, `blue`
IsHeadline	Whether this link should get special headline styling treatment.	`boolean`	—	—
Href	Use url instead.		—	—