Bolt Design System

Twig Usage

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

Schema

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`	`_self`	`_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 (deprecated)	Use url instead.	—	—	—

Install

  npm install @bolt/components-link

Dependencies

@bolt/components-icon

@bolt/core-v3.x

@bolt/lazy-queue

Link

Pega branded actionable text.